在單擊按鈕時顯示和隱藏菜單，並在外部單擊時將其隱藏

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並顯示菜單。