Как закрыть меню при нажатии и при нажатии пользователем?

Question

У меня есть следующий код:

(function ($) { 
    $(document).ready(function() { 
     $(".clicker_class").click(function() { 
      $('.show_menu_users').show(); 
     }); 
    }); 
})(jQuery); 

$('.clicker_class').click(function (e) { 
    e.stopPropagation(); 
}); 

Я новичок в JQuery и немного озадачило. Я легко мог использовать функцию show, но мне нужно использовать функцию закрытия или скрытия, чтобы закрыть меню, когда пользователь снова нажимает на .clicker_class и когда пользователь нажимает на что-то еще. Я попытался использовать e.stopPropogation(); но не работает. Как мне это сделать, учитывая мой вышеприведенный код?

Update:

I got it to close if a user clicks elsewhere using this: 

$(document).mouseup(function (e) 
{ 
    var container = $(".clicker_class"); 

    if (container.has(e.target).length === 0) 
    { 
     $(".show_menu_users").hide(); 
    } 
}); 

Вопрос:

Теперь мне просто нужно в меню, чтобы закрыть, когда пользователь нажимает на .clicker_class. Как я могу это сделать сейчас?

Answer 1

ОБНОВЛЕНО к меню закроется, если нажата вне clicker_class элементов.

Вы можете отслеживать состояние show_menu_users с использованием булева. Когда вы нажимаете на элементы clicker_class, переключите меню и обновите логическое значение. Когда вы щелкаете в другом месте документа, закройте меню.

(function ($) { 
    $(document).ready(function() { 
     var isShowing = false; 

     var toggleMenu = function() { 
      isShowing = !isShowing; //change boolean to reflect state change 
      $('.show_menu_users').toggle(isShowing); //show or hide element 
     } 

     $(document).on('click', function (e) { 
      if($(e.target).is('.clicker_class') || $(".clicker_class").has(e.target).length !== 0) { 
       toggleMenu(); 
      } else { 
       isShowing = false; 
       $('.show_menu_users').hide(); 
      } 
     }); 
    }); 
})(jQuery); 

Working example here.

Answer 2

Смотрите, если его под свои нужды:

$(function(){ 
    //we set a tabindex attribute in case of this element doesn't support natively focus 
    //outline just for styling 
    $(".clicker_class").prop('tabindex',-1).css({outline:0}); 
}); 

$(".clicker_class").click(function() { 
    $('.show_menu_users').toggle(); 
}).on('focusout',function(){ 
    $(this).hide(); 
}); 

Answer 3

решение работает CFS, но есть более простой способ сделать это, не основывая себя от глобальной переменной (что лучше избегать).

Функция «.toggle()» (без параметров) jQuery скрывает ваш элемент, если он видимый, и показывает его, если это не так. Затем вам просто нужно запустить $ (".show_menu_users") .toggle(), когда вы нажимаете на кнопку и скрываете меню, когда вы нажимаете на документ. Проблема заключается в том, что при нажатии на любых элементах меню закрывается, чтобы предотвратить это вы просто должны остановить распространение события с помощью «event.stopPropagation()»

$(document).ready(function() { 
    $(".clicker_class").on("click", function (event) { 
     event.stopPropagation(); 

     $(".show_menu_users").toggle(); 
    }); 

    $(document).on("click", function() { 
     $(".show_menu_users").hide(); 
    }); 

    $(".show_menu_users").on("click", function (event) { 
     event.stopPropagation(); 
    }); 
}); 

Working example here

Answer 4

Я использую этот метод, который я считаю более чистым ответом.

добавить на HTML-страницу сразу после/до открытия/закрытия тела тега:

<div class="main-mask"></div> 

Тогда в файле JS:

(function() { 

    'use strict'; 

    $(".sidenav-toggle").on("click", function() { 
     $("#sidenav").toggleClass("sidenav--open"); 
     $(".main-mask").toggleClass("main-mask-visible"); 
    }); 

    $(".main-mask").on("click", function() { 
     $("#sidenav").toggleClass("sidenav--open"); 
     $(".main-mask").toggleClass("main-mask-visible"); 
    }); 

})(); 

В вашем CSS:

.main-mask { 
    height: 100%; 
    left: 0; 
    opacity: 0.1; 
    top: 0; 
    visibility: hidden; 
    width: 100%; 
    z-index: 1; 
    position: fixed; 
} 

Таким образом, ваша маска действует как щелчок. Вы можете связывать/развязывать события и использовать класс .main-mask с другими элементами. Недостатком является то, что его нужно добавить на страницу. Вы можете использовать css body:after {content:''}, чтобы удалить эту зависимость.