Отображение и скрытие меню при нажатии кнопки, а также скрытие его внешними нажатиями
-
12-09-2019 - |
Вопрос
У меня есть следующий код, который содержит элементы управления, относящиеся к элементу.
<ul class="controls">
<li><button type="button" class="button1" value="somevalue"> </button></li>
<li><button type="button" class="optionsbutton" value="somevalue"> </button></li>
<li class="options">
<ul>
<li>Option 1 link</li>
<li>Option 2 link</li>
<li>Option 3 link</li>
</ul>
</li>
</ul>
Меню параметров (ul в li.options) по умолчанию скрыто в CSS (через display:none).Я хочу нажать кнопку параметров (button.optionsbutton), чтобы переключить отображение и скрытие ul, но я также хочу нажать любую другую кнопку параметров (с этой кнопкой есть много элементов), чтобы закрыть все открытые меню, и мне нужен щелкните в любом месте, кроме кнопки, чтобы закрыть меню.Мой код JQuery приведен ниже:
$('button.optionsbutton').click(
function(event){
// hiding any other open menus
$('ul.controls li.options').hide();
var OptionMenu = $(this).parent('li').siblings('.options');
if ( OptionMenu.is(':visible') ) {
$('ul.bit_controls li.bit_options').hide();
} else {
bitOptionMenu.css('display','block');
//because show() sets display to list-item insteads of block
}
event.stopPropagation();
}
);
// So that clicks anywhere outside will close the menu
$('html').click(
function(event){
if(event.target != 'button.options' && $('button.options').is(':visible') ) {
$('ul.controls li.options').hide();
}
}
);
Меню открываются правильно при нажатии кнопок и закрываются при нажатии другой кнопки или щелчке за пределами меню.НО, нажатие на одну и ту же кнопку дважды меню не закрывает!В чем тут дело, ребята, я знаю, что это легко, но я уже несколько часов ломаю голову над этим.
Решение
Линия $('ul.controls li.options').hide();
вероятно, скроет ваше меню.
Если это так, тест if ( OptionMenu.is(':visible') )
всегда будет возвращать false и показывать меню.