外をクリックするとドロップダウンメニューを非表示にするにはどうすればいいですか？

Question

私はjqueryでこの機能を持っています。これは 'showing'というクラスをトグルすることによってオプションを表示したり非表示にしたりします。

$('#button').click(function(){ 
     $('#dropDownMenu').find('.option').toggleClass('showing', 500, "easeOutSine"); 
    }); 

CSS：

#dropDownMenu .option{ 
    height: 0px; 
} 

#dropDownMenu .option.showing{ 
    height: initial; 
    padding: 25px; 
} 

HTML：

 <button id="button"></button> 
     <div id="dropDownMenu"> 
      <div class="option">OP1</div> 
      <div class="option">OP2</div> 
      <div class="option">OP3</div> 
      <div class="option">OP4</div> 
      <div class="option">OP5</div> 
     </div> 

は、どのように私は、外でクリックして、ページ上の他の場所にメニューを非表示にしていますか？

Answer 1

文書を使用してドロップダウンをクリックして非表示にします。それあなたの要素に文句を言わない火が

$(document).click(function(event){ 
if (!event) { var event = window.event; } 

     var S = event.srcElement ? event.srcElement : event.target; 
     If(($(S).attr('id')!='dropDownMenu')||$(S).hasClass('option')==false) 
    { 
     $('#dropDownMenu').hide(); 
     } 
     }) 

Answer 2

をクリックするようにちょうどあなたが.focusout()イベントリスナーを使用してみましたが、あなたの要素のための条件を追加しますか？

あなたは文書全体のボディにクリックを処理するために$('body').click(function(e) {を追加し、この

$('#button').focusout(function(){ 
     $('#dropDownMenu').find('.option').removeClass('showing', 500, "easeOutSine"); 
    }); 

Answer 3

のようにそれを試すことができます

$('body').click(function(e) { 
 
    if($('#dropDownMenu').find('.option').hasClass('showing')) { 
 
    if (e.target == $('#button')[0] || e.target == $('#dropDownMenu')[0]) e.preventDefault(); 
 
    else 
 
     $('#dropDownMenu').find('.option').removeClass('showing', 500, "easeOutSine"); 
 
    } 
 
}); 
 

 
$('#button').click(function(e) { 
 
    e.preventDefault(); 
 
    $('#dropDownMenu').find('.option').toggleClass('showing', 500, "easeOutSine"); 
 
});

#dropDownMenu .option { 
 
    height: 0px; 
 
    display:none; 
 
} 
 
#dropDownMenu .option.showing { 
 
    height: initial; 
 
    display:block; 
 
    padding: 25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="button">menu</button> 
 
<div id="dropDownMenu"> 
 
    <div class="option">OP1</div> 
 
    <div class="option">OP2</div> 
 
    <div class="option">OP3</div> 
 
    <div class="option">OP4</div> 
 
    <div class="option">OP5</div> 
 
</div>

Answer 4

$(document).ready(function() { 
 
    $('.menu > li').click(function() { 
 
    var t = $(this); 
 
    if (!t.hasClass('active')) { 
 
     t.addClass('active').next('.submenu').addClass('active'); 
 
    } else { 
 
     t.removeClass('active').next('.submenu').removeClass('active'); 
 
    }  
 
    }); 
 
    $('html').click(function(event) { 
 
    var e = $(event.target); 
 
    if (e.parents('.submenu').length < 1 && e.next('.submenu').length < 1) { 
 
     $('.submenu').removeClass('active'); 
 
    } 
 
    }); 
 
});

.submenu { 
 
    display: none; 
 
} 
 
.submenu.active { 
 
    display: block; 
 
} 
 
.menu > li { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="menu"> 
 
    <li class="submenu-link">Menu Item</li> 
 
    <ul class="submenu"> 
 
    <li>SubMenu Item</li> 
 
    </ul> 
 
</ul>

ターゲットイベントに親クラス 'サブメニュー'がない場合はドロップダウンを閉じます