0

我正在制作一个菜单，在这个菜单中我想要“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 ..的计数器功能。

当一个人点击因此，当用户单击选项卡时，它将打开更多选项卡：因此，当用户单击选项卡时，它将打开更多选项卡。

因此，当有人点击“信息”时，它会向下滑动一些其他选项卡，当其他选项卡向下时，需要再次点击“信息”链接才能进入“信息”页面。

因此，我正在寻找一种能够在不转到链接的情况下单击链接但“滑动切换”选项卡的方法，并且当“显示”选项卡时，链接需要再次处于活动状态。

编辑：我忘了指定这个页面是一个移动页面，所以鼠标悬停和悬停将不起作用......

已解决 此代码解决了我的问题：

$('#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");
    }
});

谢谢您的帮助！

4

3 回答 3

1

要取消 href，如果您以后需要 href 属性，您可以指定一些事件、单击、悬停...，并且对于重定向，您可以使用 window.location = "otherstuff.html"

于 2013-02-11T22:31:20.773 回答
1

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

这是它如何工作的示例：

jQuery('a').click(function(event){
    event.preventDefault();
    var newurl = this.href;
    jQuery('whatever').slideDown(function(){
        location.href = newurl;
    });
});
于 2013-02-11T22:32:09.907 回答
0

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

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

我不知道你的 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();
    }
});
于 2013-02-11T22:53:41.003 回答