jQuery .show работает, но не скрывается при использовании slideToggle - PullRequest
Новая
       1

jQuery .show работает, но не скрывается при использовании slideToggle

0 голосов
/ 02 ноября 2011

Я использую 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>

Есть идеи, почему это не сработает?

1 Ответ

1 голос
/ 02 ноября 2011

Просто избавьтесь от лишнего тега 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 () вызывается не для того элемента, остается незамеченным.

...