Question

如果您转到此dev site（它是使用引导程序的Joomla网站）并在1023px宽屏或更小屏幕（或任何智能手机）上查看，则会有一个汉堡菜单。如果你单击它，它会下拉菜单，如果你单击＆＃34;了解更多＆＃34;，它会跳转到一个表单（因为它实际上只是一个锚点）。但是，下拉菜单保持打开状态（因为我猜不会进入新页面）。

是否有一种简单的方法可以添加一些基本上代表的代码＆＃34;任何下拉菜单点击都应该关闭下拉菜单＆＃34;？

以下是扩展菜单时的代码（第一个导航标记可能非常重要）......

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

所以看起来像＃34;＆＃34;需要消失。因此，我正在尝试这个jquery，但它不起作用。这不行吗？

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

Answer 1

对于第一个问题的运气不好，我最近刚刚做了这个，所以我手头上有一个片段。

基本上，您要告诉代码要做的是在单击锚点时关闭导航，因此您定位a并使用slideUp属性。

$(document).ready(function(){
    $("a").click(function(){
        $("Your_Nav_ID").slideUp('slow');
    });
});

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

1 个答案: