jQuery手風琴有沒有更簡單的方法？

我一直在努力嘗試創建一段時間的功能。這裏的想法是，用戶可以看到小縮略圖+標題以及「發佈者」信息。然後，他們可以點擊標題展開文章或點擊「評論」鏈接直接展開對文章的評論。或者，如果他們希望他們可以通過點擊標題來查看評論（展開至文章），然後點擊查看評論（展開評論）。最後，模塊化而靈活的功能開放/關閉系統可以查看最新消息。jQuery手風琴有沒有更簡單的方法？

這是我一直在努力：（我把我所有的代碼在一個地方，以便其對任何人可以看看這個，查看更加容易）http://notedls.com/pointtest.html

這是我拍攝的，但是它遠離我想要的;（它使用的是jQuery 1.6插件，1.8版本已經出來，但是我遠遠沒有成爲這方面的主人或專家，我不認爲我可以從頭開始構建。已經編輯了這個插件來使它像這樣工作，但正如你所看到的，作者和評論開始使狗屎擊中粉絲;;這是因爲代碼調用標題的「A標籤」;這是標題。

有沒有人k現在有什麼更簡單的方法來實現我所設想的或可能的方法來修復這個當前的代碼？在這一點上我非常絕望;;

來源

2010-04-06 Josh

http://jqueryui.com/demos/tabs/是不是你在找什麼？ – vittore 2010-04-06 22:08:20

不，擴大每個塊。這就是我所追求的，擴大了一個領域，以查看更多信息。我遇到的問題是我需要將「發佈者」信息放在標題下方，但不能區分展開手風琴的可點擊字段。爲了增加它，我需要一些方法來使它成爲AUTHOR鏈接和評論鏈接（如果你單擊AUTHOR鏈接而不是按預期工作，它現在顯示出來）不會擴展該字段，而是充當它們自己的元素。 – Josh 2010-04-06 22:13:54

事情是這樣的：？

http://jsbin.com/elawu

alt text http://i41.tinypic.com/3518lxg.jpg

這是一個手風琴。每個「第一個元素」或標題是一個div。該標題中包含文章標題，作者和可點擊範圍，列出了該文章的評論數量。

手風琴的每個「第二個元素」或內容部分也是一個div。在該div內有一篇文章內容div和評論div。在評論div中有一個評論標題，可再次點擊，另一個內容div。層次結構是這樣的：

<div id='outer-accordion'> 
    <div class='header'> 
     <p>Article headline</p> 
     <p>by: Author</p> 
     <p><span class='clickable'># comments</span></p> 
    </div> 
    <div class='content'> 
     <div class='article'>...</div> 
     <div class='comments'> 
     <p><span class='clickable'># of comments</span></p> 
     <div class='comment-content'> 
      comment #1 
      comment #2 
      ... 
     </div> 
     </div> 
    </div> 

    ....

當頁面啓動所有評論內容的div獲得通過$('div.comments div').hide();此外手風琴被設置隱藏，手風琴onaccordionchange和onaccordionchangestart事件得到約束。最後，點擊事件被註冊爲評論鏈接。

如果您單擊標題上的任意位置，它會彈出以打開關聯的手風琴內容選項卡。如果您點擊標題中的評論鏈接，它會打開手風琴，和在內容div中打開評論div。

任何時候手風琴標籤被打開，標題中的評論鏈接被隱藏。每當手風琴選項卡關閉時，標題中的註釋鏈接都會顯示出來。

點擊手風琴內容div中的評論鏈接，切換實際評論。

來源

2010-04-07 05:26:06 Cheeso

Omg是的！你先生，是救世主！謝謝！ – Josh 2010-04-07 19:20:29

其實我有一個問題，因爲你有反應這種方式的鏈接，我假設如果我讓作者鏈接它會打開文章就像它被告知，如果我想指導作者鏈接到一個完全不同的頁面？ – Josh 2010-04-07 19:46:10

單擊「註釋」鏈接會導致手風琴選項卡打開，因爲註釋鏈接位於「第一個元素」內，並且單擊第一個元素中的任意位置會導致手風琴選項卡打開。您可以從代碼中看到，我爲「評論」鏈接註冊了一個額外的點擊事件 - 它只是設置了一個標誌，然後在手風琴的onaccordionchange事件中引用該標誌。您必須爲作者設置類似的點擊事件。當作者被點擊時，你可能也想壓制手風琴激活 - 不知道如何。似乎有可能。我會讓你把那一部分弄清楚。 – Cheeso 2010-04-07 19:59:55

哦，我覺得我得到它

$('.author').click(function() { 
    $(this).parent().find('.authordiv').toggleClass('hidden'); 
}); 
$('.comments').click(function() { 
    $(this).parent().find('.commentsdiv').toggleClass('hidden'); 
});

，並使用隱藏的CSS類

.hidden { 
    display:none; 
}

來源

2010-04-07 00:25:41 vittore

jQuery手風琴有沒有更簡單的方法？

回答

相關問題