Question

again. I have a menu that I’m building. Everything works fine, except for the fact that when I click one of the main categories, the page jumps back to the top. I would like to prevent this, but I’m worried that using preventDefault() will stop other links from loading correctly.

Here is the code..

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");
    });
});

The markup

<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>

Any help on this would be appreciated! 🙂

Answer 1

You need to call the preventDefault function so that your a element doesn’t trigger the 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");
    });
});