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

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() 的事实不会被注意到。