jQuery的“切换”需要两次点击

Question

我这个小东西的菜单我的工作：http://jsfiddle.net/6a3eZ/25/

的问题在于“MISC”和滑开“MISC2”菜单。当其中一个被打开时，另一个需要关闭，下面粘贴的“切换”代码在前两次点击中可以正常工作，但是菜单项不需要一次，而是两次点击即可再次激活。任何线索如何保持一键点击？

出于某种原因，在触摸设备上菜单也无法关闭。

这个代码在'悬停'中随处可见，但它确实需要点击激活。

这是我有：

function mainmenu(){ 

    $('.menu ul').css({display: "none"}); 

    $('.menu li.sub').toggle(function(){ 
     $(this).siblings('li').find('ul').slideUp(200); 
     $(this).find('ul:first').css({visibility: "visible",display: "none"}).slideDown(200); 
    },function(){ 
     $(this).find('ul:first').slideUp(200); 
    }); 

    $('.sub-menu li a').click(function(e) { 
     e.stopPropagation(); 
    }); 

}; 

$(document).ready(function(){     
    mainmenu(); 
}); 

Answer 1

未经测试，但尝试更多的东西是这样的：

$(document).ready(function(){     
    $('.menu ul').hide(); 

    $('.menu li.sub').click(function() { 
     $(this).find('ul:first').slideToggle(200) 
       .end().siblings('li').find('ul').slideUp(200); 
    }); 
}); 

Answer 2

试试这一个。应工作的优良：http://jsfiddle.net/Ptz9F/

我会说，使用一些类，并指定步骤以正确的方式:)

只有我的jQuery：

$(document).ready(function(){     
    $('.menu ul.sub-menu').css({display: "none"}); 
    $('.menu li.sub > a').click(function(e){ 
     var $this = $(this), 
      $parent = $this.parent('li'), 
      $sub = $('.sub-menu', $parent); 

     if (!$sub.hasClass('slided-down')) 
     { 
      // this sub is not visible 
      $('.sub-menu.slided-down').slideUp(200).removeClass('slided-down'); 
      $sub.slideDown(200).addClass('slided-down'); 
     } 
     else 
     { 
      // this sub is visible 
      $sub.slideUp(200).removeClass('slided-down'); 
     } 

     e.preventDefault(); 
     return false; 
    }); 
});