ブートストラップメニューが開いて閉じるときにモバイルメニューを切り替える

Question

メニューがブートストラップv3.3.4モバイルメニューで開いているときにXアイコンを追加しようとしています。メニューの外側をクリックすると、デフォルト。

しかし、私は正常にメニューにXアイコンを追加しましたが、アクションの外にクリックを追加できませんでした。その外側をクリックしてメニューを閉じますが、ここで

$(document).ready(function() { 
    $(".navbar-toggle").on("click", function() { 
    $(this).toggleClass("active"); 
    }); 
    $(document).on('click',function(){ 
     if ($('.navbar-toggle').hasClass('active')) { 
     $('.collapse').collapse('hide'); 
     $(this).toggleClass("active"); 
     } 
    }); 
}); 

アイコンを変更しないとき、私のコードのDEMOで見てください。

Answer 1

$(this).toggleClass("active");$(document).on("click")には、.navbar-toggleクラスは含まれません。しかし、それはdocument要素を保持します。 thisは別の関数の中にあるためです。

また、要素自体をクリックしなかったかどうかを確認する必要があります。削除する場合

if(!$(event.target).closest('.navbar-toggle').length) 

クラスは追加されますが、直接削除されます。 if ($('.navbar-toggle').hasClass('active'))は、数行前にそのクラスを追加したため、trueを返します。それで、それを削除します。

$(document).ready(function() { 
 
    $(".navbar-toggle").on("click", function() { 
 
    $(this).toggleClass("active"); 
 
    }); 
 
    $(document).on('click',function(){ 
 
    if(!$(event.target).closest('.navbar-toggle').length) { 
 
     if ($('.navbar-toggle').hasClass('active')) { 
 
     $('.collapse').collapse('hide'); 
 
     $(".navbar-toggle").toggleClass("active"); 
 
     } 
 
     } 
 
    }); 
 
    
 
});

.navbar-toggle .icon-bar:nth-of-type(2) { 
 
\t top: 1px; 
 
} 
 

 
.navbar-toggle .icon-bar:nth-of-type(3) { 
 
    \t top: 2px; 
 
} 
 

 
.navbar-toggle .icon-bar { 
 
\t position: relative; 
 
\t transition: all 500ms ease-in-out; 
 
} 
 

 
.navbar-toggle.active .icon-bar:nth-of-type(1) { 
 
\t top: 6px; 
 
\t transform: rotate(45deg); 
 
} 
 

 
.navbar-toggle.active .icon-bar:nth-of-type(2) { 
 
\t background-color: transparent; 
 
} 
 

 
.navbar-toggle.active .icon-bar:nth-of-type(3) { 
 
\t top: -6px; 
 
\t transform: rotate(-45deg); 
 
}

<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script> 
 

 
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 

 
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
 
<div class="navbar navbar-inverse navbar-fixed-top"> 
 
    <div class="navbar-header"> 
 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
    </button> 
 
    <a class="navbar-brand" href="#">Animated Burger, Bootstrap</a> 
 
    </div> 
 
    <div class="navbar-collapse collapse"> 
 
    <ul class="nav navbar-nav"> 
 
\t \t \t \t \t  <li class="active"><a href="#">Home</a> 
 
     </li> 
 
\t \t \t \t  </ul> 
 
    </div> 
 
</div>