顯示Div中的可折疊內容

Question

我已經在網上搜索了解決問題的方法，並且通過Accordion JQuery可以很接近我想要的設計，但是..我對JQuery模板進行了一些擴展，但我不知道如何實現，所以在這里：

當您進入網頁時，這就是我的Div的樣子：

當您將鼠標懸停在圖片或標題/文本上時，文本將帶有下划線和斜體，以便用戶了解帶有該特征的功能。 我想看看訪客是否點擊圖片/文字是這樣的：

這是該特定Div的HTML

<a href="#">
<div class="newsbox">
    <img src="" class="fast" /><span class="newstitle">DarkShift Studios Web</span>
    <br />
    <p>We are pleased to present our first release of the Web-headquarter. Everything you see on these webpages have been builed from scratch, HTML/CSS and JS code, no CMS programs have been used. ...</p>
    <div class="vertical_accordion_toggle">
        <p></p>
    </div>
</div>
</a>

代碼： http ： //jsfiddle.net/VCDe2/1/

感謝任何提示/技巧！

Answer 1

這是一個JSFiddle ，向您展示正在發生的事情。

jQuery的：

$('h1').click(function(){ 
    $(this).next('.hidden').slideToggle();
});

很簡單！ Adaam在上面的文章中提出的小提琴確實可以使用，但是我建議不要使用它，因為它僅適用於一個項目-您需要為創建的每個新部分添加更多代碼。

但是，此解決方案將在單擊h1項時查找任何項，然后找到最接近它的下一個.hidden類項，從而使您可以根據需要添加任意多個區域。

例如，與上述相同的代碼，你可以擴展一切都交給工作像這樣沒有額外的jQuery腳本。

將其合並到項目中所需要做的就是確保將.hidden等效項與本節的其余部分嵌套在一個容器內，並更改h1和.hidden以適合您的適當類名。 確保它們是類名，因為ID無效。