javascript - 单击按钮时显示和隐藏菜单，并通过外部单击隐藏菜单

Question

我有以下代码，其中仅包含与项目相关的控件。

<ul class="controls">
    <li><button type="button" class="button1" value="somevalue">&nbsp;</button></li>
    <li><button type="button" class="optionsbutton" value="somevalue">&nbsp;</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();
        }
    }
);

单击按钮时菜单会正确打开，单击另一个按钮或在菜单外单击时会关闭。但是，单击同一按钮两次并不会关闭菜单!伙计们，这是怎么回事，我知道这很容易，但我已经绞尽脑汁好几个小时了。

Answer 1

行 $('ul.controls li.options').hide(); 可能会隐藏您的菜单。

如果是这种情况，测试 if (OptionMenu.is(':visible') ) 将始终返回 false 并显示菜单。