在手風琴中隱藏範圍

我需要幫助隱藏/取消隱藏相鄰的跨度。我正在使用手風琴結構製作一系列常見問題解答。我需要讓每個問題在默認情況下被截斷，但是當點擊時，問題必須全部出現。最後，當點擊開放FAQ（或另一個）時，問題應該返回到它的截斷形式。在手風琴中隱藏範圍

我的標記是這樣的形式 - 在那裏我已經把這個問題的刪減版本在一個跨度和相鄰跨度的未截斷的版本：

> <div class="accord"><h4><span class="shortver">What steps do I need to 
> take to ...</span><span class="longver hide">What steps do I need to 
> take to install a constructed wetland?</span></h4><div 
> class="faqcontent">Answer goes here</div>...</div>

以下功能控制常見問題：

function fnSetUpPageFAQAccordion(){ 
    $(".accord > div").hide(); 
    $(".accord > h4").click(function(){   
    $(this).find('span.shortver').addClass("hide").next('span.longver').removeClass('hide'); 
    $(this).toggleClass("close").siblings("h4.close").removeClass("close"); 
    $(this).next("div").slideToggle("1500").siblings("div:visible").slideUp("1000");return; 
    }); };

此代碼關閉問題的截斷版本，並在點擊FAQ時打開完整版本。我無法弄清楚當再次點擊FAQ（或點擊頁面上的其他常見問題）時如何反轉該序列。

任何建議 - 也許有更好的方法呢？

謝謝/布魯斯

來源

2015-06-15 TomBaine

這是一個稍微不同的方法和解決方案。我想你可以簡化這個。將解釋的開頭放在第一個（我們稱之爲class =「questionStart」），而將其餘部分放在第二個（class =「questionEnd」）中，而不是使用短跨度版本的1跨度。通過這種方式，您可以始終保持開始的可見狀態，並且只需要擔心在第二個階段就開始切換課程。這很簡單，但你需要刪除'...'，這可能不值得爲可讀性損失。

要解決隱藏元素時隱藏元素的問題，請嘗試添加一個onClick事件，該事件首先將hide類添加到所有「questionEnd」跨度，然後切換爲您點擊的那個事件。我還沒有嘗試過，但我認爲你可以很容易地使用你原來的方法或與我的工作。

來源

2015-06-19 17:24:28 KyleK

在手風琴中隱藏範圍

回答

相關問題