Свернуть это меню, когда вызывается за пределами меню, но держите его открытым при нажатии внутри

Я пытаюсь создать всплывающее меню с помощью JQuery. Это меню показывает, когда щелкнут определенный элемент, и, конечно, когда один и тот же элемент снова щелкнут, он обрушится. Теперь я хочу, чтобы после того, как это меню было открыто, когда пользователь нажимает на любом месте веб-страницы, меню должно закрываться. Для этого я использую следующий код.Свернуть это меню, когда вызывается за пределами меню, но держите его открытым при нажатии внутри

<script> 
$(document).on('click',function(){ 

$('#div-header-submenu').collapse('hide');

});

Что происходит сейчас, так это то, что когда пользователь нажимает на любом месте веб-страницы, включая меню, оно закрывается. Поэтому, даже если вы попытались получить доступ к подменю внутри (# div-header-submeu), он откроет подменю, но оно скроет главное меню.
Любые идеи, как исправить эту ситуацию? Для повторной итерации мне нужно, чтобы подменю # div-header-sub оставалось открытым, когда вы щелкнули внутри главного меню, но рушились, если его щелкнули где-нибудь снаружи.

Вот Fiddle полная разметка меню https://jsfiddle.net/ozbk3kLs/

Спасибо,

источник

2016-04-29 Muhammad

Вы можете добавить HTML-разметку и остальной JQuery, который показывает/скрывает меню .. – Arty

Просто добавила ссылку на скрипку. Это стандартный бутстрап с jquery – Muhammad

Hy, @Dhaval Chhenda ответ должен работать. Другой способ мышления, чтобы обернуть все содержимое страницы в

<div id="main">...</div> <menu>...</menu>

с вами меню за его пределами.А затем вызвать on('click') метод на основной тег, как показано здесь: https://api.jquery.com/click/

, который даст вам что-то вроде

HTML:

<body> <div id=main> Content </div> <menu> menu </menu> </body>

JavaScript:

$("#main").click(function() { $('#div-header-submenu').collapse('hide'); });

css:

menu { z-index: 100; }

г-индекс должен быть сверху, чтобы убедиться, что он находится на верхней части макета.

Надеется, что это поможет :)

источник

2016-04-29 10:47:34

Кроме того, вы могли бы повеселиться в полном css: p –

Как я могу сделать это в css? – Muhammad

Так что это сработало! Спасибо! – Muhammad

вы можете использовать не селектор, потому что сейчас само ваше состояние «мыши в любом месте документа», так что вы можете попробовать что-то как этот

$("body:not(#div-header-submenu").on('click',function(){ 

$('#div-header-submenu').collapse('hide'); 
});

вы можете попробовать это и посмотреть, что происходит

источник

2016-04-29 10:23:50

Hi Dhaval, Это не работает. Я имею в виду, что он не закрывает меню, нажимаете ли вы внутри погружения или вне его. – Muhammad

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

Не могли бы вы продумать пример? – Muhammad

Вместо того, чтобы подключать событие клика ко всему документу, вы можете подключить его к элементу внутри тела (см. Пример ниже).

Пока ваше заголовочное подменю (при открытии) помещается «сверху» этого элемента (думайте в слоях), оно будет только «записывать» клики «снаружи» вашего заголовочного подменю. Таким образом, клики внутри вашего подменю header не будут запускать вашу функцию закрытия.

Очень простой пример того, что я имею в виду:

<div id="container"> 
    <div id="inner"></div> 
    <div id="element"></div> 
</div>

https://jsfiddle.net/Airrudi/awndqe1t/

источник

2016-04-29 10:34:07 Airrudi

Итак, если я правильно понимаю это, вы говорите, что клик должен быть подключен к любому div внутри тела? – Muhammad

Я добавил базовый jsfiddle того, что я имею в виду – Airrudi

<div class='menu'></div> 



    $('body').on('click',function(){ 
     if(!$(this).hasClass('menu')) 
     $('#div-header-submenu').collapse('hide'); 
    });

источник

2016-04-29 10:37:49

Кажется, что не работает :) – Muhammad

Можете ли вы поделиться своим URL, в скрипке это выглядит как дерьмо –

Это еще не живете. Это в моей локальной системе. – Muhammad

Свернуть это меню, когда вызывается за пределами меню, но держите его открытым при нажатии внутри

ответ

Смежные вопросы