[英]Showing and hiding a menu on button click, and hiding it with outside clicks
我有以下代码,其中只有与项目相关的控件。
<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>
默认情况下,选项菜单(li.options中的ul)在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并显示菜单。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.