如何切換活動選項卡？

Question

我的意思是像手風琴導航首先點擊打開它第二次點擊隱藏它

演示鏈接：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; 
});