выполнить функцию выпадающего на вертикальной навигации с помощью Jquery

0

Я не могу понять, как выполнить функцию выпадания при вертикальной навигации с помощью JQuery. В HTML у меня есть объявленный раздел раздела навигации и элементы списка 1-го уровня с гнездом li, создающим пункты меню второго уровня.

Когда щелкнул 1-й уровень li, я хочу, чтобы вложенная ul переключила SHOW/HIDE вложенную ul/li этого конкретного родительского 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/

Теги:
drop-down-menu

2 ответа

2
Лучший ответ

Вы имеете в виду что-то вроде этого?:

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

Вот сценарий с вышеупомянутой реализацией. http://jsfiddle.net/hearsid/SDYXy/1/

Поделиться
  • 1
    @SiddharthSharma Я откатил ваши изменения, потому что ссылка указывала на ту же скрипку, что и исходный ответ. Не стесняйтесь добавлять правильную ссылку, если хотите.
0

Я бы справился с этим, назначив соответствующий class и id тегам <li> и их дочерним тегам <ul>. Затем используйте комбинацию .slideToggle(), .slideUp() и .not() чтобы все .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/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню