Question

我正在使用bootstrap mega菜单。悬停时会打开子菜单，但有时还会发生点击事件，并且子菜单卡住了。在我的JavaScript中，没有提及任何点击事件只是具有悬停代码。

SELECT [CLAIMSNO], CheckSpaces([CLAIMSNO]), NullChar([CLAIMSNO])
FROM [TEST] 
WHERE [AID] = 20

参考： https://bootsnipp.com/snippets/featured/mega-menu-slide-down-on-hover-with-carousel

Answer 1

您需要将 Hover 事件更改为 Click 事件，并将其设置为“可切换”。

有一个例子：

$(document).ready(function(){
    var dropdownOpen = null; // Toggle status
    $(".dropdown").click(function() {
        if(dropdownOpen === this){
            $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideUp("400"); // Close clicked  
            dropdownOpen = null; // Reset
        }
        else{
            $('.dropdown-menu').not('.in .dropdown-menu').stop(true,true).slideUp("400"); // Close all     
            $('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideDown("400"); // Open clicked
            dropdownOpen = this; // Set
        }
        $(this).toggleClass('open');  
     });
     // Hide when click outside the element
     $(window).click(function() {
        $('.dropdown-menu').not('.in .dropdown-menu').stop(true,true).slideUp("400"); // Close all     
     });
});

您可以在上面发布的参考示例中尝试使用此代码。

编辑：我添加了在元素外部单击时隐藏的下拉菜单

我希望子菜单在点击事件时打开

1 个答案: