javascript - 单击其他元素时重置功能

Question

我有一个导航，点击它会显示下拉菜单，第二次点击它会转到该网址。单击导航中的其他链接时，我无法弄清楚如何取消该功能。 我的问题是，当单击第一个链接以显示下拉菜单，然后单击第二个链接以显示其下拉菜单时，但由于我已将其设置为在第二个链接上显示它的 url。因此，当再次单击第一个链接时，它将转到该 url 而不是显示下拉菜单。这就是为什么我需要在单击第二个链接时重置第一个链接功能，反之亦然。

我的 fiddle 示例。

http://jsfiddle.net/3gpfc/37/

    var visibleMenu1 = $('.menuHidden0 a');
    var visibleMenu2 = $('.menuHidden1 a');

    visibleMenu1.on('click', function () {

        var clicks = $(this).data('clicks');
        if (!clicks) {
            $('.drop-nav0').addClass('menuVisible');
        } else {
            $('.drop-nav0').removeClass('menuVisible');
            return true;    
        }
        $(this).data("clicks", !clicks);    
        return false;
        visibleMenu2.off('click');
    });

    visibleMenu2.on('click', function () {

        var clicks = $(this).data('clicks');
        if (!clicks) {
            $('.drop-nav1').addClass('menuVisible');
        } else {
            $('.drop-nav1').removeClass('menuVisible');
            return true;
        }
        $(this).data("clicks", !clicks);
        return false;
        visibleMenu1.off('click');
    });

任何帮助将不胜感激。

Answer 1

使用 preventDefault() 而不是 return false。

要反转反向链接，您还需要重置其点击 数据。

var visibleMenu1 = $('.menuHidden0 a');
var visibleMenu2 = $('.menuHidden1 a');

visibleMenu1.on('click', function (e) {

    var clicks = $(this).data('clicks');
    if (!clicks) {
        e.preventDefault();
        $('.drop-nav0').addClass('menuVisible');
    } else {
        $('.drop-nav0').removeClass('menuVisible');
    }
    $(this).data("clicks", !clicks);
    visibleMenu2.data("clicks", !visibleMenu2.data("clicks"));
});

visibleMenu2.on('click', function (e) {

    var clicks = $(this).data('clicks');
    if (!clicks) {
        e.preventDefault();
        $('.drop-nav1').addClass('menuVisible');
    } else {
        $('.drop-nav1').removeClass('menuVisible');
    }
    $(this).data("clicks", !clicks);
    visibleMenu1.data("clicks", !visibleMenu1.data("clicks"));
});