Блог

Я использую jQuery для нескольких переключаемых меню на моем сайте. Однако, если я изменю его начальную загрузку с .показать кому .скрыть это не сработает.

Мой 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>
 

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

Просто избавьтесь от своего дополнительного div тега. Вы next() выбираете это вместо ul.меню, на которое вы пытаетесь настроить таргетинг. Вот так:

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