jquery - 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") 将不包含 。导航栏切换类。但它将包含 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>