0

アイテムに関連するコントロールを持つ次のコードがあります。

<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();
        }
    }
);

メニューは、ボタンがクリックされると正しく開き、別のボタンがクリックされるか、メニューの外側をクリックすると閉じます。ただし、同じボタンを2回クリックしても、メニューは閉じません。ここでの取引はどうですか、私はそれが簡単であることを知っていますが、私は何時間もそれに頭を打ち続けてきました。

4

1 に答える 1

2

この行$('ul.controls li.options').hide();はおそらくメニューを非表示にします。

この場合、テストif ( OptionMenu.is(':visible') )は常にfalseを返し、メニューを表示します。

于 2009-08-08T22:09:58.070 に答える