Javascript 在单击按钮时显示和隐藏菜单，并使用外部单击隐藏菜单

我有下面的代码，它只包含与一个项目相关的控件

<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>

单击按钮时，菜单会正确打开；单击另一个按钮或菜单外有单击时，菜单会关闭。但是，点击同一个按钮两次并不能关闭菜单！这里的交易是什么，伙计们，我知道这很容易，但我已经用我的头敲了好几个小时。

行

$（'ul.controls li.options'）.hide（）可能会隐藏您的菜单

如果是这种情况，测试
If（OptionMenu.is（“：visible”）
将始终返回false并显示菜单。
哦，我明白了，谢谢！我早该猜出来的。我将“$（'ul.controls li.options'）.hide（）；”（位于//隐藏所有其他打开的菜单注释下的一个，并将其移到“bitOptionMenu.css（'display'，'block'）；”的正前方）向上投票，以对抗（令人遗憾的是无法解释的）向下投票，以解决OP的问题。
$('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();
        }
    }
);