Question

我在我的网站上使用jQuery进行多个切换菜单。但是，如果我将它的初始加载从.show改为.hide，它将无效。

我的js文件是：

jQuery(document).ready(function($) {
$('div ul.menu').hide();
$('h2.trigger').click(function() {
$(this).toggleClass("active").next().slideToggle('slow');
return false;
});
});

我的多个菜单的html就像这样：

<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<div>
<ul class="menu">
<li></li>
</ul>
</aside>

<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<div>
<ul class="menu">
<li></li>
</ul>
</aside>

<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<div>
<ul class="menu">
<li></li>
</ul>
</aside>

为什么这不起作用的任何想法？

Answer 1

简单地删除额外的div标记。您的next()正在挑选而不是您尝试定位的ul.menu。像这样：

<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<ul class="menu">
<li>Test</li>
</ul>
</aside>

<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<ul class="menu">
<li>Test</li>
</ul>
</aside>

<aside class="widget">
<h2 class="trigger">Portfolio</h2>
<ul class="menu">
<li>Test</li>
</ul>
</aside>

您还需要修改以下行

$('div ul.menu').hide();

省略div

$('ul.menu').hide();

注意：这似乎与.show（）一起使用的原因是默认显示你的div，所以在错误的项目上调用.show（）的事实不会引起注意。

使用slideToggle时，jQuery .show工作但不是.hide

1 个答案: