jQuery Accordian DOM

Question

Я пытаюсь создать jQuery Accordian. Пожалуйста, смотрите мой код ниже:

HTML:

<div class="filter-cat colour"> 
    <h3>Colour <i class="fa fa-angle-down" aria-hidden="true"></i></h3> 
    <ul> 
     <li><input type="checkbox" checked=""> Red <span class="count">(64)</span></li> 
     <li><input type="checkbox" checked=""> Dry White <span class="count">(78)</span></li> 
     <li><input type="checkbox" checked=""> Sparkling <span class="count">(24)</span></li> 
     <li><input type="checkbox" checked=""> Sweet White <span class="count">(16)</span></li> 
     <li><input type="checkbox" checked=""> Rose <span class="count">(6)</span></li> 
     <li><input type="checkbox" checked=""> Spirits & Liqueurs <span class="count">(16)</span></li> 
    </ul> 
</div> 
<div class="filter-cat vintage"> 
    <h3>Vintage <i class="fa fa-angle-down" aria-hidden="true"></i></h3> 
    <ul> 
     <li><input type="checkbox" checked=""> 2013 <span class="count">(16)</span></li> 
     <li><input type="checkbox" checked=""> 2012 <span class="count">(12)</span></li> 
     <li><input type="checkbox" checked=""> 2011 <span class="count">(7)</span></li> 
     <li><input type="checkbox" checked=""> 2010 <span class="count">(5)</span></li> 
     <li><input type="checkbox" checked=""> 2009 <span class="count">(3)</span></li> 
     <li><input type="checkbox" checked=""> 2008 <span class="count">(1)</span></li> 
     <li><input type="checkbox" checked=""> 2007 <span class="count">(1)</span></li> 
     <li><a href="#">view more</a></li> 
    </ul> 
</div> 

JQuery:

$(".filter-cat h3").click(function(){ 
    $(this).parent('ul').slideToggle(400); 
}); 

В принципе, когда пользователь нажимает на Н3 ИТС, предполагают, чтобы открыть ниже. Мой jQuery ошибочен, может кто-нибудь сказать мне, как это исправить?

Благодаря

Answer 1

Working fiddle.

Вы имеете неправильный селектор в коде Jquery:

$(this).parent('ul').slideToggle(400); 

$(this).parent('ul') попытается найти родителя ul из h3 элемента, когда он не существует.

Вы должны выбрать ul элемент, основанный на parent():

$(this).parent().find("ul").slideToggle(400); 

Надеется, что это помогает.

$(".filter-cat h3").click(function(){ 
 
    $(this).parent().find('ul').slideToggle(400); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="filter-cat colour"> 
 
    <h3>Colour <i class="fa fa-angle-down" aria-hidden="true"></i></h3> 
 
    <ul> 
 
     <li><input type="checkbox" checked=""> Red <span class="count">(64)</span></li> 
 
     <li><input type="checkbox" checked=""> Dry White <span class="count">(78)</span></li> 
 
     <li><input type="checkbox" checked=""> Sparkling <span class="count">(24)</span></li> 
 
     <li><input type="checkbox" checked=""> Sweet White <span class="count">(16)</span></li> 
 
     <li><input type="checkbox" checked=""> Rose <span class="count">(6)</span></li> 
 
     <li><input type="checkbox" checked=""> Spirits & Liqueurs <span class="count">(16)</span></li> 
 
    </ul> 
 
</div> 
 
<div class="filter-cat vintage"> 
 
    <h3>Vintage <i class="fa fa-angle-down" aria-hidden="true"></i></h3> 
 
    <ul> 
 
     <li><input type="checkbox" checked=""> 2013 <span class="count">(16)</span></li> 
 
     <li><input type="checkbox" checked=""> 2012 <span class="count">(12)</span></li> 
 
     <li><input type="checkbox" checked=""> 2011 <span class="count">(7)</span></li> 
 
     <li><input type="checkbox" checked=""> 2010 <span class="count">(5)</span></li> 
 
     <li><input type="checkbox" checked=""> 2009 <span class="count">(3)</span></li> 
 
     <li><input type="checkbox" checked=""> 2008 <span class="count">(1)</span></li> 
 
     <li><input type="checkbox" checked=""> 2007 <span class="count">(1)</span></li> 
 
     <li><a href="#">view more</a></li> 
 
    </ul> 
 
</div>