如何切换活动标签？

Question

我的意思是像手风琴导航一样，先单击将其打开，然后再单击将其隐藏

演示链接： http://codepen.io/cowardguy/pen/dGKEjy : http://codepen.io/cowardguy/pen/dGKEjy

你可以看到上面的链接

$("ul.otel-filtre-fiyat-tab li").click(function(){
        /*
            $(this).parents(".otel-tekli-listeleme").find(".otel-full-detay").slideToggle();
        */
        var number = $(this).index();
        $("ul.otel-filtre-fiyat-tab li").removeClass("tab-aktif-hover");
        $(this).parents(".otel-tekli-listeleme").find(".otel-tab-icerik").hide().eq(number).slideDown("fast");
        $(this).parents(".otel-tekli-listeleme").find("ul.otel-filtre-fiyat-tab li").eq(number).addClass("tab-aktif-hover");
        return false;
    });

您可以单击标记的区域

Answer 1

问题在这条线上：

$(this).parents(".otel-tekli-listeleme").find(".otel-tab-icerik").hide().eq(number).slideDown("fast");

我删除了hide方法，并使用了slideToggle而不是slideDown 。

$(this).parents(".otel-tekli-listeleme").find(".otel-tab-icerik").eq(number).slideToggle("fast");

我还更改了最后一行：

$(this).parents(".otel-tekli-listeleme").find("ul.otel-filtre-fiyat-tab li").eq(number).toggleClass("tab-aktif-hover");

这样，如果选项卡关闭，则边框颜色将被删除。 您还需要使用removeClass删除该行。 结果：

$("ul.otel-filtre-fiyat-tab li").click(function(){
    var number = $(this).index();

    $(this).parents(".otel-tekli-listeleme").find(".otel-tab-icerik").not(':eq(' + number + ')').slideUp("fast");
    $(this).parents(".otel-tekli-listeleme").find("ul.otel-filtre-fiyat-tab li").not(':eq(' + number + ')').removeClass("tab-aktif-hover");

    $(this).parents(".otel-tekli-listeleme").find(".otel-tab-icerik").eq(number).slideToggle("fast");
    $(this).parents(".otel-tekli-listeleme").find("ul.otel-filtre-fiyat-tab li").eq(number).toggleClass("tab-aktif-hover");
    return false;
});