单击其他元素时重置功能

Reset function when other element is clicked on

本文关键字：功能其他元素单击更新时间：2023-09-26

我有一个导航，单击时显示下拉菜单，第二次单击时转到该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');
    });

任何帮助都将不胜感激。

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

尝试使用此代码

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