Quiero 1 clic en vez de 2

[sergi_multimedia]

Hola people, me gustaría saber porqué para que se abra el desplegable de mi menú tengo que clicar dos veces en vez de uno.

OJO, en la versión para smarthpone, que es donde existe ese menú en la parte superior.

http://fustot.cat

Código Javascript:

$(document).ready(function(){
    $("a.productes").click(function(evento){
        var data = $(this).attr('data-estado');
        if(data == 1){
            $("#main-productes").fadeIn('5000');
            $("a.productes").css("background-color", "#EEEEEE");
            $("a.productes").css("color", "#0060a6");
            $(this).attr('data-estado',2);
        }else{
            $("#main-productes").fadeOut('5000');
            $("a.productes").css("background-color", "white");
            $("a.productes").css("color", "#0060a6");
            $(this).attr('data-estado',1);
        }
    });
    
    $("li.mobile").click(function(evento){
        var data = $(this).attr('data-estado');
        if(data == 1){
            $("div.mobile").fadeIn('5000');
            $("li.mobile").css("background-color", "#acacac");
            $(".container").css("margin", "44px 0 0 0");
            $(".container").css("display", "block");
            $("footer").css("display", "block");
            $("li.language").css("background-color", "#eeeeee");
            $("li.email").css("background-color", "#eeeeee");
            $("li.list").css("background-color", "#eeeeee");
            $("div.email").css("display", "none");
            $("div.language").css("display", "none");
            $("nav#main-productes").css("display", "none");
            $(this).attr('data-estado',2);
        }else{
            $("div.mobile").fadeOut('5000');
            $("li.mobile").css("background-color", "#eeeeee");
            $(".container").css("display", "block");
            $(this).attr('data-estado',1);
        }
    });
    
    $("li.email").click(function(evento){
        var data = $(this).attr('data-estado');
        if(data == 1){
            $("div.email").fadeIn('5000');
            $("li.email").css("background-color", "#acacac");
            $(".container").css("margin", "44px 0 0 0");
            $(".container").css("display", "block");
            $("footer").css("display", "block");
            $("li.language").css("background-color", "#eeeeee");
            $("li.mobile").css("background-color", "#eeeeee");
            $("li.list").css("background-color", "#eeeeee");
            $("div.mobile").css("display", "none");
            $("div.language").css("display", "none");
            $("nav#main-productes").css("display", "none");
            $(this).attr('data-estado',2);
        }else{
            $("div.email").fadeOut('5000');
            $("li.email").css("background-color", "#eeeeee");
            $(this).attr('data-estado',1);
        }
    });
    
    $("li.language").click(function(evento){
        var data = $(this).attr('data-estado');
        if(data == 1){
            $("div.language").fadeIn('5000');
            $("li.language").css("background-color", "#acacac");
            $(".container").css("margin", "44px 0 0 0");
            $(".container").css("display", "block");
            $("footer").css("display", "block");
            $("li.email").css("background-color", "#eeeeee");
            $("li.mobile").css("background-color", "#eeeeee");
            $("li.list").css("background-color", "#eeeeee");
            $("div.email").css("display", "none");
            $("div.mobile").css("display", "none");
            $("nav#main-productes").css("display", "none");
            $(this).attr('data-estado',2);
        }else{
            $("div.language").fadeOut('5000');
            $("li.language").css("background-color", "#eeeeee");
            $(this).attr('data-estado',1);
        }
    });
    
    $("li.list").click(function(evento){
        var data = $(this).attr('data-estado');
        if(data == 1){
            $("nav#main-productes").fadeIn('5000');
            $("li.list").css("background-color", "#acacac");
            $("li.email").css("background-color", "#eeeeee");
            $("li.mobile").css("background-color", "#eeeeee");
            $("li.language").css("background-color", "#eeeeee");
            $("div.email").css("display", "none");
            $("div.mobile").css("display", "none");
            $("div.language").css("display", "none");
            $(".container").css("display", "none");
            $("footer").css("display", "none");
            $(this).attr('data-estado',2);
        }else{
            $("nav#main-productes").fadeOut('5000');
            $("li.list").css("background-color", "#eeeeee");
            $(".container").css("display", "block");
            $("footer").css("display", "block");
            $(this).attr('data-estado',1);
        }
    });
    
    $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash;
        $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 500, 'swing', function () {
        window.location.hash = target;
    });
});
 
 
 
});
 

Saludos, y gracias de antemano

[maycolalvarez]

necesitamos el html que sustenta dicho menu, sería perfecto un enlace online para verlo en acción.

sólo puedo adelantarte que todos los enlaces enlazan un evento click, si es un menu un mouseover sería el indicado

[sergi_multimedia]

Iniciado por maycolalvarez

necesitamos el html que sustenta dicho menu, sería perfecto un enlace online para verlo en acción.

sólo puedo adelantarte que todos los enlaces enlazan un evento click, si es un menu un mouseover sería el indicado

Código HTML:

<ul class="mobile">
<li class="list"><a href="javascript:void(0)"><i class="icon-list"></i></a></li>
<li class="email"><a href="javascript:void(0)"><i class="icon-envelope-alt"></i></a></li>
<li class="mobile"><a href="javascript:void(0)"><i class="icon-mobile-phone"></i></a></li>
</ul>
 
<nav id="main-productes">
<div>
<ul id="fustes">
<li><?php echo $category = get_the_category_by_ID( $category=23 ); ?></li>
<li><a href="<?php echo get_category_link( $category=1 ); ?>"><?php echo $category = get_the_category_by_ID( $category=1 ); ?></a></li>
</ul>
<ul id="tarimes">
<li><?php echo $category = get_the_category_by_ID( $category=25 ); ?></li>
<li><a href="<?php echo get_category_link( $category=11 ); ?>"><?php echo $category = get_the_category_by_ID( $category=11 ); ?></a></li>
</ul>
<ul id="taulers">
<li><?php echo $category = get_the_category_by_ID( $category=24 ); ?></li>
<li><a href="<?php echo get_category_link( $category=12 ); ?>"><?php echo $category = get_the_category_by_ID( $category=12 ); ?></a></li>
<li><a href="<?php echo get_category_link( $category=13 ); ?>"><?php echo $category = get_the_category_by_ID( $category=13 ); ?></a></li>
<li><a href="<?php echo get_category_link( $category=14 ); ?>"><?php echo $category = get_the_category_by_ID( $category=14 ); ?></a></li>
<li><a href="<?php echo get_category_link( $category=15 ); ?>"><?php echo $category = get_the_category_by_ID( $category=15 ); ?></a></li>
</ul>
</div>  
</nav>
 

Aquí tienes el HTML, para verlo online tienes el enlace de la web en mi primer comentario, te recuerdo que es para su versión smatphone.

Muchas gracias por tu tiempo ;)

Saludos

[maycolalvarez]

¿smartphone?: los eventos del mouse no aplican para smartphones, debes usar una librería especializada, como jQueryMobile o jQueryTouch, y eventos del tipo "tap", porque obviamente un smartphone NO tiene mouse

[sergi_multimedia]

Iniciado por maycolalvarez

¿smartphone?: los eventos del mouse no aplican para smartphones, debes usar una librería especializada, como jQueryMobile o jQueryTouch, y eventos del tipo "tap", porque obviamente un smartphone NO tiene mouse

Gracias, me informaré más sobre los eventos tap de Jquery, no sabía que existían.

Gracias!