3

我有一个导航，单击时会显示下拉菜单，第二次单击时会转到该 URL。单击导航中的其他链接时，我无法弄清楚如何取消该功能。我的问题是，当单击第一个链接以显示下拉列表，然后单击第二个链接以显示其下拉列表时，但是由于我已经将其设置为第二个链接，因此它转到了 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');
    });

任何帮助将不胜感激。

4

2 回答 2

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"));
});
于 2013-08-09T16:02:02.247 回答
0

尝试使用此代码

        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);
         }
    });
于 2013-08-09T16:54:16.077 回答