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>

菜单打开和关闭时，Bootstrap Mobile菜单切换类

1 个答案: