Question

我有用于导航栏下拉动画的这段代码。您如何看待它与悬停一起工作。问题出在电话上，我可以打开下拉菜单，但无法关闭。

我该如何更改在手机上也可以使用的代码？

谢谢

$(document).ready(function(){
            $(".dropdown").hover(            
                function() {
                    $('.dropdown-menu', this).not('.in .dropdown-menu').stop( true, true ).slideDown("fast");
                    $(this).toggleClass('open');        
                },
                function() {
                    $('.dropdown-menu', this).not('.in .dropdown-menu').stop( true, true ).slideUp("fast");
                    $(this).toggleClass('open');       
                }
            );
        });

Answer 1

您可以在手机中使用Handel的点击事件

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {

$(document).on("click ", function(e) {
    var container = $(".dropdown-menu");

    // if the target of the click is the container
    if (container.is(e.target) && container.has(e.target).length > 0) {
        container.hide();
    }
});

} else {

$(document).ready(function() {
    $(".dropdown").hover(
        function() {
            $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideDown("fast");
            $(this).toggleClass('open');
        },
        function() {
            $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true, true).slideUp("fast");
            $(this).toggleClass('open');
        }
    );
});
}

我更改了代码以检查手机。

如何使用悬停动画关闭下拉菜单

1 个答案: