显示和隐藏按钮点击菜单,以及与外部点击隐藏它
-
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>
在选项菜单(在li.options了ul)默认的CSS隐藏(经由显示器:无)。我想上的选项按钮(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,并显示该菜单。
不隶属于 StackOverflow