Jquery скрывает мега выпадающий список

Я пытаюсь создать мега-выпадающую панель навигации. Jquery не является моей сильной стороной, но мне нужно использовать его для достижения того, что я ищу. Я знаю о различных темах по похожим вопросам, но ни одна из них не сделала именно то, что я ищу (помните, что я не профессионал в JQuery, и я собираюсь использовать его только для этой небольшой части моего сайта).

Пока у меня есть этот HTML-макет:

<div class = "header-wrapper">
            <div class = "header">
                <ul id = "navbar">
                    <li class = "toggle">Navbar Option 1
                        <ul class = "dropdown">
                            <li class = "dropdown-inner">
                                Dropdown 1
                            </li>
                        </ul>
                    </li>
                    <li class = "toggle">Navbar Option 2
                        <ul class = "dropdown">
                            <li class = "dropdown-inner test">
                                Dropdown 2
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
        </div>

Это мой JQuery:

<script type="text/javascript">
            window.onload = function(){
                var $dd = $(".dropdown");

                $('.toggle').click(function() {
                    $('.toggle').not(this).children('ul').slideUp("slow");
                    $(this).children('ul').slideToggle("slow");

                });

                /* Don't hide the dropdown when clicking inside */
                $dd.on("click", function(evt) {
                    evt.stopPropagation();
                });

            } 
            </script>

Мой .dropdown div показывает и скрывает, как предполагалось. Но мне нужно добавить функцию, которая скрывает раскрывающийся список, если щелкнуть за его пределами. Теперь я могу прослушивать событие щелчка в документе, но затем щелчок по моим параметрам .toggle Navbar также не работает.

Таким образом, я хочу, чтобы ссылка .toggle работала и чтобы вы могли щелкнуть внутри .dropdown ul, не закрывая ее, но если вы щелкнете где-нибудь еще на странице, .dropdown должен .slideUp("slow").

Любая помощь? Спасибо.


drop-down-menu jquery navbar slidetoggle slideup
person HermannHH    schedule 23.03.2013    source источник
comment
Вы можете использовать jquery event.target, чтобы проверить, что инициировало это событие, и может работать соответственно.   -  person Deadlock    schedule 23.03.2013

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать jquery event.target, чтобы проверить, что инициировало это событие, и может работать соответственно. Что-то вроде ниже

   $(document).ready(function () {
    $("#navbar").click(function (event) {
        var check = $(event.target).attr('class');
        alert(check);
        if (check == 'toggle') {
            //do something
        }

        if (check == 'dropdown') {
            //do something
        }
    });
});

Ознакомьтесь с работой jsfiddle здесь

person Deadlock    schedule 23.03.2013
comment
Спасибо за предложение. Однако я пробовал это без какого-либо успеха. Однако я не думаю, что мне нужно будет полностью изменить свой код, поскольку в настоящее время он работает точно так же, как и должен, за исключением скольжения вверх по любым открытым раскрывающимся спискам, если не щелкнуть ни .toggle, ни .dropdown/.dropdown-inner. Я считаю, что это можно было бы сделать, просто добавив пару строк кода в мой существующий код, но, как было сказано ранее, я на самом деле не знаю Javascript, поскольку обычно использую только PHP. - person HermannHH; 24.03.2013
comment
@user1933068 user1933068 Вам просто нужно поместить тот же код в операторы if ... Ничего не изменилось - person Deadlock; 24.03.2013