jquery - ページの他の場所をクリックした後、ブートストラップを開いた折りたたまれたメニューを非表示にする方法

Question

私はブートストラップ テンプレートに取り組んでおり、誰かがメニューの外側をクリックしたときに、開いている折りたたまれたメニューを非表示/閉じる必要があります。メニューの画像はこちらhttp://dev.flutechs.com/menu.png

ありがとう

Answer 1

「折りたたまれたメニュー」がどのように作成されているかによって異なります。

標準の Bootstrap ドロップダウン メニューを使用すると、ドキュメント内の他の場所をクリックすると自動的に閉じます...

<div class="btn-group">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Menu
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
    <li class="divider"></li>
    <li><a href="#">Choice..</a></li>
  </ul>
</div>

コンポーネントを使用している場合は、 jQuery を使用しcollapseてドキュメント ハンドラーを作成できます。click

$(document).on('click',function(){
    $('.collapse').collapse('hide');
})

Bootply のデモ

Answer 2

このスクリプト行を追加するだけです。

 $(document).ready(function(){
    $('.dropdown-toggle').dropdown();
});