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

点击之前，

.dropdown-menu已经显示：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");
     });
}

移动版中的下拉菜单错误需要两次点击

2 个答案: