表示と非表示ボタンのクリックのメニューを、外部回のクリックで、それを隠します
-
12-09-2019 - |
質問
私はただの項目に関連するコントロールがあり、次のコードを持っています。
<ul class="controls">
<li><button type="button" class="button1" value="somevalue"> </button></li>
<li><button type="button" class="optionsbutton" value="somevalue"> </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ではデフォルトで隠されています。私は、オプションボタン(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();
}
}
);
ボタンがクリックされたときに適切に開閉メニューを別のボタンをクリックするか、メニューの外側をクリックがあるとされている場合。しかし、二度同じボタンをクリックすると、メニューを閉じていません!いただきました!ここでの取引が人々、私はその簡単を知っているが、私は時間のためにそれに対して私の頭を叩いてきます。
解決
ライン$('ul.controls li.options').hide();
は、おそらくあなたのメニューを非表示になります。
このような場合は、テストif ( OptionMenu.is(':visible') )
は常にfalseを返すと、メニューが表示されます。
所属していません StackOverflow