Я хочу, чтобы подменю открывалось по событию клика

Я использую мегаменю начальной загрузки. При наведении он открывает подменю, но иногда также принимает событие щелчка, и подменю зависает. В моем javascript нет упоминания о каком-либо событии клика, просто есть код наведения.

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

ссылка: https://bootsnipp.com/snippets/featured/mega-menu-slide-down-on-hover-with-carousel


javascript jquery megamenu submenu
person Ganesh Gaikar    schedule 28.11.2018    source источник
comment
вы включили файлы bootstrap css/js, оба?   -  person Akber Iqbal    schedule 28.11.2018
comment
да, я сделал, но все равно он зависает не каждый раз, а несколько раз, например, в 100 кликах 1 раз он зависает   -  person Ganesh Gaikar    schedule 28.11.2018
comment
Если вы поделитесь браузером и ОС в вопросе, кто-то может попытаться воспроизвести вашу проблему — также, если вы сможете воспроизвести ее с рабочим минимальным примером во фрагменте кода, вы получите помощь.   -  person Akber Iqbal    schedule 28.11.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вам нужно изменить событие 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     
     });
});

Вы можете попробовать этот код в том же справочном примере, который вы разместили выше.

Изменить: я добавил раскрывающийся список, скрытый при нажатии за пределами элемента.

person TriForce    schedule 29.11.2018
comment
он работает нормально, но мне нужно закрыть подменю, когда я нажимаю за пределами меню - person Ganesh Gaikar; 06.12.2018