버튼 클릭에 메뉴를 표시하고 숨기고 외부 클릭으로 숨기기
-
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 (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();
}
}
);
버튼을 클릭하면 다른 버튼을 클릭하거나 메뉴 외부에서 클릭하면 메뉴가 올바르게 열립니다. 그러나 같은 버튼을 두 번 클릭하면 메뉴가 닫히지 않습니다! 여기의 거래는 무엇인가, 나는 그것을 쉽게 알고 있지만 나는 몇 시간 동안 그것에 대항하여 머리를 때렸다.
해결책
라인 $('ul.controls li.options').hide();
아마도 메뉴를 숨길 것입니다.
이 경우 테스트입니다 if ( OptionMenu.is(':visible') )
항상 거짓을 반환하고 메뉴를 표시합니다.
제휴하지 않습니다 StackOverflow