当菜单打开和关闭时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>