下拉菜单bug在移动设备需要两次点击

Question

我有一个问题与下拉菜单的移动，菜单只有在我点击两次时才会打开。第一次打开和关闭非常快。第二次点击打开下拉菜单ok，

$(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');
        }
    });
});

。下拉菜单已经有一个显示:none，在点击之前。

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

我怎么能打开它只有一个点击?

编辑:我还尝试了stop()

$(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");
     });
}