防止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属性可以取消某些事件，点击，悬停...，并且对于重定向你有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();
    }
});