顯示/隱藏切換和添加類

Question

我正在創建FAQ頁面。

我想打開和關閉答案。我有使用jQuery的工作。

我也想添加一個類（.active）到「打開」的選擇器。我可以將該類添加到父級。

我的問題是這樣的：我需要使用unclassed元素，因爲最終用戶不會理解添加類。它需要是無風格的塊元素。所以它看起來像這樣：

<h3 class="active">Activator</h3> 
    <p>show</p> 
<h3>Activator</h3> 
    <p>hide</p> 
<h3>Activator</h3> 
    <p>hide</p> 
etc... 

當腳本添加類。主動向被點擊的H3，它增加了類。主動給所有的H3標籤。

這裏是我的代碼：

$(document).ready(function() { 
    $('.content p').hide(); 
    $('h3').click(function(){ 
     $(this).next("p").toggle(250); 
    }); 
    $(".content h3").click(function(){ 
     $(".content h3").toggleClass("active"); 
    }); 
}); 

鏈接：working demo/site 預先感謝您。

Answer 1

這是因爲您正在使用$(".content h3")選擇click處理程序中的所有元素。相反，你需要引用this得到的只是被點擊的元素：

$(document).ready(function() { 
    $('.content p').hide(); 
    $('h3').click(function(){ 
     $(this).next("p").toggle(250); 
    }); 
    $(".content h3").click(function(){ 
     $(this).toggleClass("active"); 
    }); 
}); 

編輯：一個好的技巧是建立你的CSS是這樣的：

.content p 
{ 
    display: none; 
} 
.content h3.active + p 
{ 
    display: block; 
} 

通過使用相鄰兄弟組合器（+）根據<h3>是否處於活動狀態來控制<p>的顯示。然後，您可以簡化您的JavaScript：

$(document).ready(function() { 
    $(".content h3").click(function() { 
     $(this).toggleClass("active"); 
    }); 
}); 

你失去了你的動畫這種方式，但你可以與CSS3過渡添加回來。

編輯：如果高度不固定，轉換高度是棘手的。它可以通過轉換max-height來完成，但是當摺疊時，可能會有延遲。你可以玩這些值來獲得一些效果很好的東西。以下是我想出的：jsfiddle.net/FsVPn