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

我有两个快速链接菜单，使用CSS和jQuery显示。激活菜单的链接没有问题，但关闭它们时，如果两个菜单都已激活，则链接需要两次点击才能触发。尝试打开“查看快速链接”菜单，然后尝试打开“我想要”菜单。你会看到两个点击问题。菜单需要点击两次才能关闭

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(); 
 
    } 
 
    }); 
 
});

.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 
 
}

<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>

来源

2016-11-07 Mike Hermary

我不敢相信你做得那么复杂，应该向你提出一些简单的建议。 – skobaljic

其实这段代码在代码段中工作 – paolobasso

您有一个用于两个菜单的变量'open'。 – Barmar

你只需要改变模块/切换类：

$(document).on('click', function(e) { 
 
\t if(!$('.j-menu-toggle').is(e.target) && $('.j-menu-container').has(e.target).length === 0) { 
 
\t \t $('.j-menu').removeClass('active'); 
 
\t } else { 
 
\t \t $(e.target).closest('.j-menu').toggleClass('active'); 
 
\t }; 
 
});

.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。

来源

2016-11-07 22:43:41 skobaljic

感谢您缩短的代码。它很有效，但我仍然需要在用户点击页面上的任何位置时使菜单失去“活动”类的能力。 –

没有问题，答案更新（只有脚本）。 – skobaljic

谢谢，代码工作完美。 –

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

回答

相关问题