當菜單打開和關閉時Bootstrap Mobile菜單切換類

Question

我試圖在Bootstrap 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>