Question

我有一个'a'标签，所以当我点击它时，它显示其他html内容（列表）。 JS代码对其他标签是通用的...... 我需要的是当我再次按下（链接）“标题”时，列表会被隐藏。我该怎么办？

我已完成此demo

JS

$(".nav_tab>ul>li>a").click(function(event) { 
    $(".nav_tab>ul>li>a").parent().removeClass("activo");
    $(this).parent().toggleClass("activo");

    var capa = $(this).prop('href').split('#');
    $(".nav_tabcontent").slideUp("fast");
    $("#"+capa[1]).slideDown("slow");

    event.preventDefault();
});

$(".nav_tab>ul>li>h3").click(function(event) { 
    $(".nav_tab>ul>li>a").parent().removeClass("activo");

    var o = $(this).parent().find("a");
    o.parent().toggleClass("activo");

    var capa = o.prop('href').split('#');   
    $(".nav_tabcontent").slideUp("fast");
    $("#"+capa[1]).slideToggle("slow");    

    event.preventDefault();
});

Answer 1

您所要做的就是使用jQuery切换类。这是小提琴：http://jsfiddle.net/d90ac70w/2/。只需检查div是否有一个活动类。

$(".nav_tab>ul>li>h3").click(function (event) {
    $(".nav_tab>ul>li>a").parent().removeClass("activo");
    var o = $(this).parent().find("a");
    o.parent().toggleClass("activo");

    var capa = o.prop('href').split('#');

    if(!$("#" + capa[1]).hasClass('active')){
      $("#" + capa[1]).slideDown(); 
      $("#" + capa[1]).toggleClass('active'); 
    }else{
      $("#" + capa[1]).slideUp();   
      $("#" + capa[1]).toggleClass('active'); 
    }
    event.preventDefault();
});

因为我们正在调用相同的jQuery选择器。我们可以将这些方法联系起来。

$(".nav_tab>ul>li>h3").click(function (event) {
    $(".nav_tab>ul>li>a").parent().removeClass("activo");
    var o = $(this).parent().find("a");
    o.parent().toggleClass("activo");

    var capa = o.prop('href').split('#');

    if(!$("#" + capa[1]).hasClass('active')){
      $("#" + capa[1]).slideDown().toggleClass('active');
    }else{
      $("#" + capa[1]).slideUp().toggleClass('active');
    }

    event.preventDefault();
});

使用slideUp Jquery问题隐藏选项卡

1 个答案: