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; 
    }); 
});