JQuery slideUp/slideDown with simple FAQ - 額外功能正在運行

我有一個簡單但相當長的FAQ頁面（因此不需要複雜的JQueryUI手風琴類型腳本）。我已經設置瞭如下，重複對每個問題/回答了網頁：JQuery slideUp/slideDown with simple FAQ - 額外功能正在運行

<h3 class="faqoff">Question here</h3> 
<div class="faqa"> 
    Answer here (can be lots of paras, lists, etc.) 
</div>

然後我有在頁的末尾以下內容：

<script type="text/javascript"> 
$("div.faqa").hide();       /* hide all div.faqa on page load */ 
$("h3.faqoff").click(function() {    /* when 'faqoff' H3 (hidden answer) is clicked */ 
    $("div.faqa").slideUp(500);     /* close any open div.faqa */ 
    $(this).toggleClass("faqoff faqon");   /* swap faqoff/faqon class for H3 */ 
    $(this).next("div.faqa").slideDown(500);  /* open the div.faqa for this H3 */ 
}); 
$("h3.faqon").click(function() {    /* when 'faqon' H3 (visible answer) is clicked */ 
    $(this).toggleClass("faqoff faqon");   /* swap faqon/faqoff class for H3 */ 
    $("div.faqa").slideUp(500);     /* close the div.faqa for this H3 */ 
}); 
</script>

這幾乎工程，除一旦顯示了一個常見問題解答（H3現在是class .faqon，它的div.faqa是可見的），再次點擊H3會將div.faqa向上滑動，然後再次滑落，而據我所知，這只是在.faqoff的函數中 - 我錯過了什麼嗎？我在IE11和最新的Chrome中得到了相同的結果。

新來的jsfiddle但希望 - http://jsfiddle.net/mDWt2/

來源

2014-01-07 Adam

你能做出的jsfiddle並將其添加到這個職位嗎？ – Brad

'faqoff'多麼偉大的名字，聽起來像fu * koff？ – adeneo

你現在必須關閉這些評論，對吧？ – adeneo

事件處理程序連接到在執行時選擇相匹配的元素，改變類以後也沒有爲事件處理程序，他們仍然連接到相同的元素

嘗試是這樣的

$("div.faqa").hide(); 
$("h3.faqoff").on('click', function() { 
    var elem = $(this).next("div.faqa"); 
    $("div.faqa").not(elem).slideUp(500); 
    $(this).toggleClass("faqoff faqon"); 
    elem.slideToggle(500); 
});

來源

2014-01-07 17:16:48 adeneo

瞭解事件處理程序的說明 - 謝謝！但是，您所設置的點擊功能不會首先隱藏所有的div.faqa，然後向下滑動（通過切換）這個H3？我想要做的是爲當前版本打開一個slideUp（這是爲什麼我想到了第二個點擊功能 - 現在我可以看到爲什麼它不起作用）。 – Adam

@亞當 - 這很容易避免，編輯答案。 – adeneo

這裏的JS FIDDLE DEMO供大家參考。實際上，你不需要編寫太多的代碼，並且使事情變得複雜。看看jsfiddle並親自看看。這裏的代碼無論如何：

$('.a').filter(':nth-child(n+4)').hide(); 

$('.q').on('click', function() { 
    $(this).next().slideDown(200) 
    .siblings('.a').slideUp(200); 
});

此外，這是很好的，當你顯示第一個答案默認情況下。這就是爲什麼我使用.filter方法來實現這一點。以防萬一，你希望所有的答案默認爲隱藏，然後使用：

$('.a').hide();

來源

2014-01-07 17:29:12 Morven

謝謝 - 比我原來的更容易;我也更瞭解jsfiddle和兄弟姐妹！ – Adam

@Adam很高興聽到:) – Morven

JQuery slideUp/slideDown with simple FAQ - 額外功能正在運行

回答

相關問題