使用 Jquery 在垂直导航上执行下拉功能答案

【问题标题】：execute a drop down function on a vertical navigation using Jquery使用 Jquery 在垂直导航上执行下拉功能
【发布时间】：2013-12-31 17:00:14
【问题描述】：

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

当第一级 li 被点击时，我希望嵌套的 ul 切换 SHOW/HIDE 该特定父级 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/

【问题讨论】：

标签： javascript jquery html css drop-down-menu

【解决方案1】：

你的意思是这样的吗？：

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

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

【讨论】：

@SiddharthSharma 我已回滚您的编辑，因为该链接指向与原始答案相同的小提琴。如果您愿意，请随意添加正确的链接。

【解决方案2】：

我处理这个问题的方法是将匹配的class 和id 分配给<li> 及其子<ul> 标签。然后，使用.slideToggle()、.slideUp() 和.not() 的组合使一切按预期运行。像这样的东西应该可以解决问题：

HTML

    <nav id="mnCat" class="primary clearfix">
        <ul class="parent">
            <li><a href="#" class="selected" data-filter="*">All</a></li>
            <li class="braids"><a href="#" data-filter=".braids">Braids</a>
                <ul id="braids">
                    <li><a href="#">Corn Rows</a></li>
                    <li><a href="#">Micro Braids</a></li>
                    <li><a href="#">Single Braids</a></li>
                </ul>
            </li>
            <li class="twists"><a href="#" data-filter=".twists">Twists</a>
                <ul id="twists">
                    <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 class="weaving"><a href="#" data-filter=".weaving">Weaving</a>
                <ul id="weaving">
                    <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 class="wigs"><a href="#" data-filter=".wigs">Wigs</a>
                <ul id="wigs">
                    <li><a href="#">Half Wigs</a></li>
                    <li><a href="#">Full Wigs</a></li>
                    <li><a href="#">Lace Fronts</a></li>
                </ul>                    
            </li>
            <li class="silk"><a href="#" data-filter=".silk">Silk Fantasy</a></li>
        </ul>
    </nav>

jQuery

$(document).ready(function () { 
    $('.parent li').click(function () {
        var showMe = $(this).attr('class');
        $('ul#'+showMe).slideToggle();
        $('.parent ul').not('#'+showMe).slideUp();
    });
});

最后添加一点 CSS

.parent ul {
    display: none;
}

这可确保当您单击某个部分时，该部分的内容会向下滑动到视图中，而所有其他部分的内容将从视图中向上滑动。它还允许您单击当前可见的部分以将其隐藏。

它正在运行：http://jsfiddle.net/2GwJ5/1/

【讨论】：