如何在单击时关闭下拉菜单

How to close a dropdown menu on click?

本文关键字：下拉菜单 单击      更新时间：2023-09-26

如果你去这个开发网站(这是一个使用bootstrap的Joomla网站)，并在1023px宽屏幕或更小(或任何智能手机)上查看，有一个汉堡包菜单。如果你点击它，它会下拉一个菜单，如果你点击"Learn More"，它会跳转到一个表单(因为它实际上只是一个锚点)。然而，下拉菜单保持打开状态(我猜是因为它没有进入新页面)。

是否有一种简单的方法来添加一些代码，基本上说"任何下拉菜单单击应该关闭下拉菜单"?

下面是菜单展开时的代码(第一个nav标签可能是最重要的)…

<nav class="t3-navbar-collapse navbar-collapse collapse in"><ul class="nav navbar-nav level0">
<li>
<a href="/index.php">Home </a>
</li>
<li class="dropdown">
<a href="/index.php/features" data-toggle="dropdown" data-target="#">Features <b class="caret"></b></a>

<ul class="level1 dropdown-menu"><li>
<a href="/index.php/features/scheduling-routing">Scheduling &amp; Routing </a>
</li><li>
<a href="/index.php/features/billing-invoicing">Billing &amp; Invoicing </a>
</li><li>
<a href="/index.php/features/mobile-workforce">Mobile Workforce </a>
</li><li>
<a href="/index.php/features/office-staff-persona">Office Staff Persona </a>
</li><li>
<a href="/index.php/features/owner-persona">Owner Persona </a>
</li><li>
<a href="/index.php/features/field-worker-persona">Field Worker Persona </a>
</li></ul></li>
<li class="dropdown">
<a href="/index.php/industries" data-toggle="dropdown" data-target="#">Industries <b class="caret"></b></a>

<ul class="level1 dropdown-menu"><li>
<a href="/index.php/industries/cleaning">Cleaning </a>
</li><li>
<a href="/index.php/industries/lawn">Lawn </a>
</li><li>
<a href="/index.php/industries/pest">Pest </a>
</li><li>
<a href="/index.php/industries/hvac">HVAC </a>
</li></ul></li>
<li>
<a href="/index.php/pricing">Pricing </a>
</li>
<li class="active dropdown">
<a href="/index.php/about" data-toggle="dropdown" data-target="#">About <b class="caret"></b></a>

<ul class="level1 dropdown-menu"><li class="current active">
<a href="/index.php/about/resources">Resources </a>
</li><li>
<a href="/index.php/about/support">Support </a>
</li><li>
<a href="/index.php/about/security">Security </a>
</li></ul></li>
<li class="">
<a href="#leadform">Learn More</a>
</li>
<li>
<a href="#leadform">Contact</a>
</li>
<li>
<a href="/index.php/log-in">Log In </a>
</li>
</ul></nav>

然后当它再次折叠时，nav标签中的类看起来像这样…

<nav class="t3-navbar-collapse navbar-collapse collapse" style="height: 1px;">

所以看起来类"in"需要消失。因此，我正在尝试这个jquery，但它不起作用。这难道不行吗?

jQuery(function($) {
$("li a").click(function() {
   $("nav.t3-navbar-collapse").removeClass( "in" );
});
});

很抱歉第一个问题不太好，实际上我最近才做过这个，所以我手头有一个片段给你。

基本上你想告诉代码做的是当你点击一个锚点时关闭导航，所以你瞄准a并使用slideUp属性。

$(document).ready(function(){
    $("a").click(function(){
        $("Your_Nav_ID").slideUp('slow');
    });
});
相关文章：