我的 jQuery 导航菜单视图单击链接时跳转

Question

If you look at my code pen my code pen and scroll down to the bottom of the page, and click a drop-down link the view jumps?

var nav = $('#menu > ul > li');
nav.find('li').hide();
nav.click(function () {
    nav.not(this).find('li').hide();
    $(this).find('li').slideToggle();
});

function openNav() {
    document.getElementById("open").style.display = "none";
    document.getElementById("close").style.display = "block";
    $('#menu ul').slideToggle();
}

function closeNav() {
    document.getElementById("open").style.display = "block";
    document.getElementById("close").style.display = "none";
    $('#menu ul').slideToggle();
}

Answer 1

Here is the update to your code:

//...
nav.click(function (e) {
    e.preventDefault();
    nav.not(this).find('li').hide();
    $(this).find('li').slideToggle();
});
//...

Explanation: you have to pass the self reference and use the preventDetault() method to override the default behavior.