菜单需要两次点击才能关闭

时间：2016-11-07 22:30:35

标签： jquery

我有两个使用CSS和jQuery显示的快速链接菜单。激活菜单的链接可以正常工作，但在关闭它们时，如果两个菜单都已激活，则链接需要两次单击才能触发。尝试打开查看快速链接＆＃39;菜单，然后尝试打开“我想要的”＃39;菜单。您将看到两次点击问题。

＆＃13;
＆＃13; 
jQuery(document).ready(function($) {

  $('.nav-menu-trigger').on('click', function(e) {
    e.preventDefault;
    $('.nav-menu-trigger').toggleClass('active');
    $('.nav-container').toggleClass('open');
  });

  var open = false;

  var openWTMenu = function() {
    $('.wt-menu .j-menu-open').addClass('active');
    $('.wt-menu .j-menu-container').addClass('open');
    open = true;
  }

  var closeWTMenu = function() {
    $('.wt-menu .j-menu-open').removeClass('active');
    $('.wt-menu .j-menu-container').removeClass('open');
    open = false;
  }

  var openQLMenu = function() {
    $('.ql-menu .j-menu-open').addClass('active');
    $('.ql-menu .j-menu-container').addClass('open');
    open = true;
  }

  var closeQLMenu = function() {
    $('.ql-menu .j-menu-open').removeClass('active');
    $('.ql-menu .j-menu-container').removeClass('open');
    open = false;
  }

  $('.wt-menu .j-menu-open,.wt-menu .j-menu-close').click(function(e) {
    e.stopPropagation();
    var toggle = open ? closeWTMenu : openWTMenu;
    toggle();
  });

  $('.ql-menu .j-menu-open,.ql-menu .j-menu-close').click(function(e) {
    e.stopPropagation();
    var toggle = open ? closeQLMenu : openQLMenu;
    toggle();
  });

  $(document).click(function(e) {
    if (!$(e.target).closest('.wt-menu .j-menu-container').length) {
      closeWTMenu();
    }
  });

  $(document).click(function(e) {
    if (!$(e.target).closest('.ql-menu .j-menu-container').length) {
      closeQLMenu();
    }
  });
});
＆＃13; 
.module.j-menu {
  float: left;
  margin-right: 10px;
  position: relative;
}

.module.j-menu .j-menu-open {
  display: block;
  width: 136px;
  height: 50px;
  padding: 0 10px;
  border: none;
  text-transform: uppercase;
  text-align: center;
  font: 300 .722em/1.429em "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  cursor: pointer
}

.module.wt-menu .j-menu-open,
.module.wt-menu .j-menu-hide {
  background-color: #d9ab28
}

.module.ql-menu .j-menu-open,
.module.ql-menu .j-menu-hide {
  background-color: #1d5538
}

.module.j-menu .j-menu-container {
  display: none;
  width: 336px;
  height: auto;
  position: absolute;
  top: -2px;
  left: 0;
  z-index: 103
}

.module.j-menu .j-menu-container.open {
  display: block
}

.module.wt-menu .j-menu-controls {
  background-color: #5a5a5b
}

.module.ql-menu .j-menu-controls {
  background-color: #ded6b3
}

.module.j-menu .j-menu-close {
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 10px;
  background: transparent;
  border: none;
  text-align: center;
  text-transform: uppercase;
  font: 300 .722em/1.429em "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: pointer;
  color: #fff
}

.module.wt-menu .j-menu-close {
  background-color: #d9ab28
}

.module.ql-menu .j-menu-close {
  background-color: #1d5538
}

.module.wt-menu li {
  border-bottom: 1px solid #656566
}

.module.ql-menu li {
  border-bottom: 1px solid #ccc5a5
}

.module.j-menu ul a:link {
  display: block;
  width: 100%;
  padding: 15px 20px;
  text-transform: uppercase;
  font: 400 .833em/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.module.wt-menu ul a:link,
.module.wt-menu ul a:visited {
  color: #ded6b3
}

.module.wt-menu ul a:hover,
.module.wt-menu ul a:active {
  color: #d9aa38
}

.module.ql-menu ul a:link,
.module.ql-menu ul a:visited {
  color: #757575
}

.module.ql-menu ul a:hover,
.module.ql-menu ul a:active {
  color: #d9aa38
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="module j-menu wt-menu">
  <button class="j-menu-open">
    I Want To...
  </button>
  <div class="j-menu-container">
    <div class="j-menu-controls">
      <button class="j-menu-close">
        Close
      </button>
      <ul class="nav menu">
        <li class="item-639">
          <a class=" icon-communities" href="/hamlets" title="Our Communities">
            <span>Our Communities</span>
          </a>
        </li>
        <li class="item-644">
          <a class=" icon-forsale" href="#" title="Businesses For Sale">
            <span>Businesses For Sale</span>
          </a>
        </li>
        <li class="item-640">
          <a class=" icon-entrepreneurship" href="#" title="Youth Entrepreneurship">
            <span>Youth Entrepreneurship</span>
          </a>
        </li>
        <li class="item-645">
          <a class=" icon-approvals" href="#" title="Development Approvals">
            <span>Development Approvals</span>
          </a>
        </li>
        <li class="item-641">
          <a class=" icon-partnerships" href="#" title="Regional Partnerships">
            <span>Regional Partnerships</span>
          </a>
        </li>
        <li class="item-646">
          <a class=" icon-publications" href="#" title="Publications">
            <span>Publications</span>
          </a>
        </li>
        <li class="item-642">
          <a class=" icon-land" href="#" title="Land">
            <span>Land</span>
          </a>
        </li>
        <li class="item-647">
          <a class=" icon-directory" href="/business/business-directory" title="Business Directory">
            <span>Business Directory</span>
          </a>
        </li>
        <li class="item-643">
          <a class=" icon-franchise" href="#" title="Franchise Opps">
            <span>Franchise Opps</span>
          </a>
        </li>
        <li class="item-648">
          <a class=" icon-resources" href="#" title="Resources">
            <span>Resources</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="module j-menu ql-menu">
  <button class="j-menu-open">
    View Quicklinks
  </button>
  <div class="j-menu-container">
    <div class="j-menu-controls">
      <button class="j-menu-close">
        Close
      </button>
      <ul class="nav menu">
        <li class="item-639">
          <a class=" icon-communities" href="/hamlets" title="Our Communities">
            <span>Our Communities</span>
          </a>
        </li>
        <li class="item-644">
          <a class=" icon-forsale" href="#" title="Businesses For Sale">
            <span>Businesses For Sale</span>
          </a>
        </li>
        <li class="item-640">
          <a class=" icon-entrepreneurship" href="#" title="Youth Entrepreneurship">
            <span>Youth Entrepreneurship</span>
          </a>
        </li>
        <li class="item-645">
          <a class=" icon-approvals" href="#" title="Development Approvals">
            <span>Development Approvals</span>
          </a>
        </li>
        <li class="item-641">
          <a class=" icon-partnerships" href="#" title="Regional Partnerships">
            <span>Regional Partnerships</span>
          </a>
        </li>
        <li class="item-646">
          <a class=" icon-publications" href="#" title="Publications">
            <span>Publications</span>
          </a>
        </li>
        <li class="item-642">
          <a class=" icon-land" href="#" title="Land">
            <span>Land</span>
          </a>
        </li>
        <li class="item-647">
          <a class=" icon-directory" href="/business/business-directory" title="Business Directory">
            <span>Business Directory</span>
          </a>
        </li>
        <li class="item-643">
          <a class=" icon-franchise" href="#" title="Franchise Opps">
            <span>Franchise Opps</span>
          </a>
        </li>
        <li class="item-648">
          <a class=" icon-resources" href="#" title="Resources">
            <span>Resources</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

您只需要在模块上更改/切换类：

$(document).on('click', function(e) {
	if( !$('.j-menu-toggle').is(e.target) && $('.j-menu-container').has(e.target).length === 0 ) {
		$('.j-menu').removeClass('active');
	} else {
		$(e.target).closest('.j-menu').toggleClass('active');
	};
});
.j-menu {
  float: left;
  margin-right: 10px;
  position: relative;
}

.j-menu > .j-menu-toggle {
  display: block;
  width: 136px;
  height: 50px;
  padding: 0 10px;
  border: none;
  text-transform: uppercase;
  text-align: center;
  font: 300 .722em/1.429em "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #fff;
  cursor: pointer
}

.wt-menu .j-menu-toggle {
  background-color: #d9ab28
}

.ql-menu .j-menu-toggle {
  background-color: #1d5538
}

.j-menu-container {
  display: none;
  width: 336px;
  height: auto;
  position: absolute;
  top: -2px;
  left: 0;
  z-index: 103
}

.active .j-menu-container {
  display: block
}

.wt-menu .j-menu-controls {
  background-color: #5a5a5b
}

.ql-menu .j-menu-controls {
  background-color: #ded6b3
}

.j-menu-controls > .j-menu-toggle {
  width: 100%;
  height: 50px;
  margin: 0;
  padding: 0 10px;
  background: transparent;
  border: none;
  text-align: center;
  text-transform: uppercase;
  font: 300 .722em/1.429em "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: pointer;
  color: #fff
}

.wt-menu .j-menu-toggle {
  background-color: #d9ab28
}

.ql-menu .j-menu-toggle {
  background-color: #1d5538
}

.module.wt-menu li {
  border-bottom: 1px solid #656566
}

.module.ql-menu li {
  border-bottom: 1px solid #ccc5a5
}

.module.j-menu ul a:link {
  display: block;
  width: 100%;
  padding: 15px 20px;
  text-transform: uppercase;
  font: 400 .833em/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.module.wt-menu ul a:link,
.module.wt-menu ul a:visited {
  color: #ded6b3
}

.module.wt-menu ul a:hover,
.module.wt-menu ul a:active {
  color: #d9aa38
}

.module.ql-menu ul a:link,
.module.ql-menu ul a:visited {
  color: #757575
}

.module.ql-menu ul a:hover,
.module.ql-menu ul a:active {
  color: #d9aa38
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="module j-menu wt-menu">
  <button class="j-menu-toggle">
    I Want To...
  </button>
  <div class="j-menu-container">
    <div class="j-menu-controls">
      <button class="j-menu-toggle">
        Close
      </button>
      <ul class="nav menu">
        <li class="item-639">
          <a class=" icon-communities" href="/hamlets" title="Our Communities">
            <span>Our Communities</span>
          </a>
        </li>
        <li class="item-644">
          <a class=" icon-forsale" href="#" title="Businesses For Sale">
            <span>Businesses For Sale</span>
          </a>
        </li>
        <li class="item-640">
          <a class=" icon-entrepreneurship" href="#" title="Youth Entrepreneurship">
            <span>Youth Entrepreneurship</span>
          </a>
        </li>
        <li class="item-645">
          <a class=" icon-approvals" href="#" title="Development Approvals">
            <span>Development Approvals</span>
          </a>
        </li>
        <li class="item-641">
          <a class=" icon-partnerships" href="#" title="Regional Partnerships">
            <span>Regional Partnerships</span>
          </a>
        </li>
        <li class="item-646">
          <a class=" icon-publications" href="#" title="Publications">
            <span>Publications</span>
          </a>
        </li>
        <li class="item-642">
          <a class=" icon-land" href="#" title="Land">
            <span>Land</span>
          </a>
        </li>
        <li class="item-647">
          <a class=" icon-directory" href="/business/business-directory" title="Business Directory">
            <span>Business Directory</span>
          </a>
        </li>
        <li class="item-643">
          <a class=" icon-franchise" href="#" title="Franchise Opps">
            <span>Franchise Opps</span>
          </a>
        </li>
        <li class="item-648">
          <a class=" icon-resources" href="#" title="Resources">
            <span>Resources</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="module j-menu ql-menu">
  <button class="j-menu-toggle">
    View Quicklinks
  </button>
  <div class="j-menu-container">
    <div class="j-menu-controls">
      <button class="j-menu-toggle">
        Close
      </button>
      <ul class="nav menu">
        <li class="item-639">
          <a class=" icon-communities" href="/hamlets" title="Our Communities">
            <span>Our Communities</span>
          </a>
        </li>
        <li class="item-644">
          <a class=" icon-forsale" href="#" title="Businesses For Sale">
            <span>Businesses For Sale</span>
          </a>
        </li>
        <li class="item-640">
          <a class=" icon-entrepreneurship" href="#" title="Youth Entrepreneurship">
            <span>Youth Entrepreneurship</span>
          </a>
        </li>
        <li class="item-645">
          <a class=" icon-approvals" href="#" title="Development Approvals">
            <span>Development Approvals</span>
          </a>
        </li>
        <li class="item-641">
          <a class=" icon-partnerships" href="#" title="Regional Partnerships">
            <span>Regional Partnerships</span>
          </a>
        </li>
        <li class="item-646">
          <a class=" icon-publications" href="#" title="Publications">
            <span>Publications</span>
          </a>
        </li>
        <li class="item-642">
          <a class=" icon-land" href="#" title="Land">
            <span>Land</span>
          </a>
        </li>
        <li class="item-647">
          <a class=" icon-directory" href="/business/business-directory" title="Business Directory">
            <span>Business Directory</span>
          </a>
        </li>
        <li class="item-643">
          <a class=" icon-franchise" href="#" title="Franchise Opps">
            <span>Franchise Opps</span>
          </a>
        </li>
        <li class="item-648">
          <a class=" icon-resources" href="#" title="Resources">
            <span>Resources</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

同时更新JSFiddle。

相关问题
最新问题