Question

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

我的小提琴示例。

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。

要反转相反的链接，您还需要重置其clicks数据。

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

Answer 2

尝试使用此代码

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

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

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

单击其他元素时重置功能

2 个答案: