防止href链接jQuery

Question

我正在制作一个菜单，在这个菜单中，我希望选择“slideToggle”一些标签（菜单项）。 所以我有一个标签“中学”，当用户点击那里时，他/她将“显示”其他一些标签。

唯一的问题是菜单是自动生成的，“中学”有一个我无法删除的href链接，因为用户也需要能够访问该链接。

经过一番研究，我想出了这个：

$('#menu li a, #menu li').click(function() {
        $(this).find("ul").slideToggle("slow");
        switch( $('#menu ul.menu li ul').css('display') ){
            case "none":
                return false;
            break;
            case "list-item":
                return true;
            break;
        };

});

但是，当用户现在单击链接以打开其他选项卡时，脚本不会“滑动”选项卡。 我也尝试过event.preventDefault(); 由于链接之后需要激活，因此也无法工作的方法。 我还没有找到preventDefault的计数器功能..

因此，当用户单击选项卡时，它将打开更多选项卡：

因此，当有人点击“信息”时，它会向下滑动其他标签，当其他标签关​​闭时，需要再次点击“信息”链接转到“信息”页面。

所以我正在寻找的是一种方法，能够点击链接而无需转到链接，但是“slideToggeling”选项卡，当标签被“显示”时，链接需要再次激活。

编辑：我忘了指定这个页面是一个移动页面所以鼠标悬停和悬停将无法正常工作......

求助此代码解决了我的问题：

$('#menu ul.menu li.expanded').each(function(i){
switch(i)
{
case 0:
    $(this).addClass("open");  
break;
case 1:
    $(this).addClass("open");  
break;
case 2:
    $(this).addClass("open");  
break;
case 3:
    $(this).addClass("open");  
break;
case 4:
    $(this).addClass("open");  
break;
}

$('#menu li').click(function() {
    if( $(this).find("ul").css('display') == "none" ){
        $('#menu li ul.menu').slideUp("fast");
    }
    $(this).find("ul").slideDown("slow");
});
$('#menu li.open a').on('click', function(e) {
    var tabs = $(this).parent().find('ul');
    if( tabs.css('display') == "none") {
        e.preventDefault();
        $('#menu li ul.menu').slideUp("fast");
        tabs.slideDown("slow");
    }
});

谢谢您的帮助！

Answer 1

如果您以后需要href属性可以取消某些事件，点击，悬停...，并且对于重定向，您可以取消href，你可以制作window.location =“otherstuff.html”

Answer 2

如果我明白你在说什么，你就不能通过事件来做到这一点。

以下是它如何工作的示例：

jQuery('a').click(function(event){
    event.preventDefault();
    var newurl = this.href;
    jQuery('whatever').slideDown(function(){
        location.href = newurl;
    });
});

Answer 3

从用户体验的角度来看，这听起来有点麻烦。 用户如何知道点击“信息”一旦打开一些子元素，但是另一个点击进入“信息”页面？ 这看起来像一个基本的手风琴元素，其中一次单击打开子元素，另一次单击关闭它们。

如果您需要将第一级元素作为可点击链接，但也有第二级元素，我会投票在鼠标悬停时打开第二级元素而不是单击。 这也可以解决您的点击问题，因为您不必阻止任何默认值。

我不知道你的HTML所以这可能会出错，但让我们试一试。

$('#menu li').on('mouseenter mouseleave', function() {
    $(this).find('ul').slideToggle('slow');
});

如果你仍然喜欢点击方法，你可以做这样的事情。 再次，CSS选择器可能会出错，因为我只是猜测你的HTML，但你可能会得到这个想法。

$('#menu li a').on('click', function(e) {
    // Get parent of a (li), find ul underneath and check if it's visible
    var jqUl = $(this).parent().find('ul');
    if(!jqUl.is(':visible')) {
        // subelements are not visible, prevent default and slide subelements down
        e.preventDefault();
        jqUl.slideDown();
    }
});