移動中的下拉菜單錯誤需要兩次點擊

Question

我在移動設備中的下拉菜單中遇到問題， 僅當我點擊兩次時，菜單纔會打開。第一次打開關閉非常快。第二次點擊打開下拉菜單確定，

$(document).ready(function() { 
    $('#data-cat-menu .mega-menu a.dropdown').on('click', function(e){ 
     e.preventDefault(); 
     $(this).next('.dropdown-menu').slideToggle(); 

     if($(this).find('span.glyphicon').hasClass('glyphicon-triangle-right')) { 
      $(this).find('span.glyphicon').removeClass('glyphicon-triangle-right'); 
      $(this).find('span.glyphicon').addClass('glyphicon-triangle-bottom'); 
     } else { 
      $(this).find('span.glyphicon').removeClass('glyphicon-triangle-bottom'); 
      $(this).find('span.glyphicon').addClass('glyphicon-triangle-right'); 
     } 
    }); 
}); 

。在點擊之前，下拉菜單已經有一個顯示：無。

<div class="dropdown-menu" style="display: none;">...</div> 

我怎樣才能使它打開只有一個點擊？

編輯： 我也嘗試停止（）

$(this).next('.dropdown-menu').stop().slideToggle(); 

Answer 1

$('#data-cat-menu .mega-menu a.dropdown').on('click', function(e){ 
e.stopPropagation(); 
    if($(this).find('span.glyphicon').hasClass('glyphicon-triangle-right')) { 
     $(this).find('span.glyphicon').removeClass('glyphicon-triangle-right'); 
     $(this).find('span.glyphicon').addClass('glyphicon-triangle-bottom'); 
     $(this).next('.dropdown-menu').show(); 
    } else { 
     $(this).find('span.glyphicon').removeClass('glyphicon-triangle-bottom'); 
     $(this).find('span.glyphicon').addClass('glyphicon-triangle-right'); 
     $(this).next('.dropdown-menu').hide(); 
    } 
}); 

Answer 2

嘗試以下操作：

var dropDown = $(this); 
if(dropDown.hasClass("expanded")){ 
    dropDown.next('.dropdown-menu').slideUp("slow",function(){ 
     dropDown.removeClass("opened"); 
    }); 
}else{ 
    dropDown.next('.dropdown-menu').slideDown("slow",function(){ 
     dropDown.addClass("expanded"); 
    }); 
}