Потомки подменю обхода jQuery DOM

Question

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

        <nav>
            <h2><a href="#">NAV</a></h2>
            <ul id="dropNav">
                <li><a href="#">This site</a>
                    <ul>
                        <li><a href="#">DD Link 01</a></li>
                        <li><a href="#">DD Link 02</a></li>
                        <li><a href="#">DD Link 03</a></li>
                    </ul>
                </li>
                <li><a href="#">About us</a>
                    <ul>
                        <li><a href="#">DD Link 01</a></li>
                        <li><a href="#">DD Link 02</a></li>
                    </ul>
                </li>
                <li><a href="#">Portfolio</a>
                    <ul>
                        <li><a href="#">DD Link 01</a></li>
                        <li><a href="#">DD Link 02</a></li>
                        <li><a href="#">DD Link 03</a></li>
                        <li><a href="#">DD Link 04</a></li>
                        <li><a href="#">DD Link 05</a></li>
                    </ul>
                </li>
                <li><a href="#">Prices</a>
                    <ul>
                        <li><a href="#">DD Link 01</a></li>
                    </ul>
                </li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Social</a>
                    <ul>
                        <li><a href="#">DD Link 01</a></li>
                        <li><a href="#">DD Link 02</a></li>
                        <li><a href="#">DD Link 03</a></li>
                        <li><a href="#">DD Link 04</a></li>
                    </ul>
                </li>
            </ul>
        </nav>

$ (документ).ready (function () {

$(function() {
    var pull        = $('nav > h2');
        menu        = $('nav ul:first');
        menuHeight  = menu.height();

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();
    });
});


$("#dropNav > li").on("click", function(e) {
    e.preventDefault();
    $(this).siblings().children().next().slideUp(); // when opening a sub
    $(this).find("ul").slideToggle(); // toggle the submenu
});

});

Смотрите мой JSFiddle

Как я могу деактивировать эти ссылки 2-го уровня?

Answer 1

Расширяя ответ phari, он выглядит как проблема позиционирования CSS.

/* set up sub nav hover */

nav ul li a {
padding:10px 25px 10px 25px;
display:block;
/*position:relative;*/ /*commenting out this line seemed to fix it*/
}

Вы также можете взглянуть на jQueryUI, который имеет удобную функцию аккордеона.

JQueryUI Аккордеон