讓手風琴j更好

我已經用jQuery編寫了一個簡單的手風琴faqs列表，但是尋找一些反饋來改進它。讓手風琴j更好

我加價看起來是這樣的：

<ul class="faqs"> 
    <li><h4>Question</h4> 
     <div class="answer">answer</div> 
    </li> 
    <li><h4>Question</h4> 
     <div class="answer">answer</div> 
    </li> 
    <li><h4>Question</h4> 
     <div class="answer">answer</div> 
    </li> 
</ul>

我的JS看起來是這樣的：

var question = $('.faqs h4'); 
question.click(function() { 
    $(this).next('div').slideToggle('fast'); 
});

所有。答的div設置爲顯示：無在頁面加載，但如果js被禁用，所有.answer div默認顯示。

乾杯

來源

2012-11-20 calebo

http://programmers.stackexchange.com /是一個更好的地方。 – Abhilash

你如何應用'display：none;'？因爲通過js添加顯示無意味着：沒有js>沒有隱藏..那麼如何定義它與純CSS？ – Joonas

@Joonas，我沒有提及我使用modernizer來檢查瀏覽器是否支持js，所以如果它確實存在，它會將.js類添加到body標籤，然後在.js上執行'display：none'。回答。 – calebo

我會建議增加$(".answer").slideUp()，以便只有一個手風琴項目可以同時打開：

var question = $('.faqs h4'); 
question.click(function() { 
    $(".answer").slideUp(); 
    $(this).next('div').slideToggle('fast'); 
});

（另外，也許加少許的風格，例如:hover僞類也許添加一些其他的動畫。）

Fiddle

來源

2012-11-20 07:14:03 McGarnagle

每次只顯示一個項目，爲什麼需要使所有.answers滑動？ – calebo

@calebo只是爲了讓你打開一個，以前打開的一個關閉。 – McGarnagle

我不知道，爲什麼要嘗試一下從頭開始時有這麼多優秀的手風琴在那裏 ...

你嘗試引導崩潰？

http://twitter.github.com/bootstrap/javascript.html#collapse

簡單的標記，你可以從別的孔引導框架，或simply use it independently的一部分使用（你需要的jQuery雖然）

來源

2012-11-20 08:14:06 balexandre

有多種原因可以讓自己像手風琴一樣：1.爲了學習的目的。 2.代碼是你自己的代碼（在任何編程人員的生活中都是驕傲的時刻）。你可以馬上編寫代碼，使其儘可能複雜或簡單。 – Joonas

我喜歡爲所有工作感到自豪，而不是把時間花在如此簡單的事情上，以至於我可以與其他人一起完成工作，也讓我很高興在項目中提及其他開源代碼。但那只是我！ :) – balexandre

我期待學習和提高我的js，所以使用一個庫如此簡單的東西超過了頂部。 – calebo

讓手風琴j更好

回答

相關問題