Скользящее меню JQuery

Question

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

Вот код ..

JQuery

$(document).ready(function() {
    // Collapse everything but the first menu:
    $("#nav_menu > li > a").find("+ ul").slideUp(1);
    // Expand or collapse:
    $("#nav_menu > li > a").click(function() {
        $(this).find("+ ul").slideToggle("fast");
    });
});

Разметка

<ul id="nav_menu">
    <li><a href="#">Main Cat 1</a>
        <ul>
            <li><a href="whatever.php">Subcat 1</a></li>
            <li><a href="whatever.php">Subcat 2</a></li>
        </ul>
    </li>
    <li><a href="#">Main Cat 2</a>
        <ul>
            <li><a href="whatever.php">Subcat 1</a></li>
            <li><a href="whatever.php">Subcat 2</a></li>
        </ul>
    </li>
</ul>

Любая помощь в этом будет оценена! :)

Answer 1

Вам нужно вызвать функцию preventDefault, чтобы ваш элемент a не вызывал href.

$(document).ready(function() {
    // Collapse everything but the first menu:
    $("#nav_menu > li > a").find("+ ul").slideUp(1);
    // Expand or collapse:
    $("#nav_menu > li > a").click(function(e) {
        e.preventDefault();
        $(this).find("+ ul").slideToggle("fast");
    });
});