菜单打开和关闭时的 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) {
	  top: 1px;
}

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

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

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

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

.navbar-toggle.active .icon-bar:nth-of-type(3) {
	  top: -6px;
	  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">
					      <li class="active"><a href="#">Home</a>
      </li>
				    </ul>
  </div>
</div>