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);
});

基本上当用户点击H3时，它会打开以下内容。我的jQuery错了，有人能告诉我如何修复它吗？

由于

Answer 1

<强> Working fiddle

你的jquery代码中有一个错误的选择器：

$(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>

希望这有帮助。

＆＃13;

＆＃13;

select distinct 
   t.Terminalid, 
   t.TerminalName
from 
   Terminal as t
Inner Join 
   Pos_Payments as p 
   on p.TerminalId = t.TerminalId
where 
   TransactionDateTime < '7/29/2015' and TransactionDateTime !> '7/30/2015'
order by t.TerminalID 

＆＃13;

public class User
{
    protected int _xCoor = 0;
    protected int _yCoor = 0;

    public int xCoor
    {
        get { return _xCoor; }
    }

    public int yCoor
    {
        get { return _yCoor; }
    }
}

＆＃13;

＆＃13;

＆＃13;