javascript - 使用 Jquery 在垂直导航上执行下拉功能

Question

我不知道如何使用 Jquery 在垂直导航上执行下拉功能。在 HTML 中，我有一个声明的导航部分和第一级列表项，嵌套 li 创建第二级菜单项。

单击第 1 级 li 时，我希望嵌套的 ul 切换显示/隐藏特定父 li 的嵌套 ul/li。

HTML:

<aside class="sidebar clearfix">

    <nav id="mnCat" class="primary clearfix">
            <ul>
                <li><a href="#" class="selected" data-filter="*">All</a></li>
                <li><a href="#" data-filter=".braids">Braids</a>
                    <ul>
                        <li><a href="#">Corn Rows</a></li>
                        <li><a href="#">Micro Braids</a></li>
                        <li><a href="#">Single Braids</a></li>
                    </ul>
                </li>
                <li><a href="#" data-filter=".twists">Twists</a>
                    <ul>
                        <li><a href="#">Curly</a></li>
                        <li><a href="#">Kinky</a></li>
                        <li><a href="#">Straight</a></li>
                        <li><a href="#">Wavy</a></li>
                    </ul>
                <li><a href="#" data-filter=".weaving">Weaving</a>
                    <ul>
                        <li><a href="#">Straight</a></li>
                        <li><a href="#">Wet & Wavy</a></li>
                        <li><a href="#">Curly</a></li>
                        <li><a href="#">Deep Wave</a></li>
                        <li><a href="#">Kinky</a></li>
                    </ul>                       
                </li>
                <li><a href="#" data-filter=".wigs">Wigs</a>
                    <ul>
                        <li><a href="#">Half Wigs</a></li>
                        <li><a href="#">Full Wigs</a></li>
                        <li><a href="#">Lace Fronts</a></li>
                    </ul>                    
                </li>
                <li><a href="#" data-filter=".silk">Silk Fantasy</a></li>
            </ul>
        </nav>

</aside>

JQuery:

$(document).ready(function () { 

    var $dropDown = $('nav#mnCat ul li ul');
            $dropDown.addClass("drop");

    var $trig = $('nav#mnCat ul');
            $trigger = $trig.find('a'),         
            $trigger.click(function () {
                $dropD = $dropDown.find(this),

                $dropD.css("display","block");


                });

    });

jSfiddle 链接: http://jsfiddle.net/SDYXy/

Answer 1

你的意思是这样的吗？

$trigger.click(function () {
    $(this).next('ul').slideToggle();
}

这是上面实现的 fiddle 。 http://jsfiddle.net/hearsid/SDYXy/1/