버튼 클릭에 메뉴를 표시하고 숨기고 외부 클릭으로 숨기기

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)에 기본적으로 숨겨져 있습니다. UL을 표시하고 숨기려면 옵션 버튼 (Button.optionsButton)을 클릭하고 싶지만 다른 옵션 버튼 (이 버튼에 많은 항목이 있음)을 클릭하여 열린 메뉴를 닫고 필요합니다. 버튼이없는 곳을 클릭하여 메뉴를 닫으십시오. 내 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') ) 항상 거짓을 반환하고 메뉴를 표시합니다.