使用jQuery擴展/摺疊項目列表

我有一個頁面上的博客文章的列表，並需要給予用戶展開/摺疊每個細節的能力。我環顧了next（）這樣的選項，但每個博客文章的結構都不允許兄弟姐妹。使用jQuery擴展/摺疊項目列表

<div class="post"> 
    <div class="controls"> 
      <ul> 
       <li>Permalink</li> 
       <li><a href="#" class="showcomments">Comments</a></li> 
      </ul> 
    </div> 
    <div class="comments">Comments go here</div> 
</div>

我有一個頁面上的這些帖子的數量不受限制，所以我需要一個簡單的功能，使得它如此，如果我點擊「評論」的鏈接對任何職位的。點評面板只帖子展開/摺疊（點擊該鏈接應切換相應的評論div）。

來源

2013-07-09 Phil Lockwood

對象的鏈接，切換關於該文章的評論滑動，滑動的所有其他意見了：

$('.showcomments').on('click', function(e) { 
    e.preventDefault(); 
    var comment = $(this).closest('.post').find('.comments'); 
    $('.comments').not(comment).slideUp(); 
    comment.slideToggle(); 
});

來源

2013-07-09 23:19:58 adeneo

完美工作。謝謝- –

如果HTML的結構無法修改，您將不得不遍歷DOM ...從click事件目標（錨點），直到它的容器（li）到ITS容器（ul ）直到ITS容器（div.controls），然後next（）來查找div.comments。 jQuery可以使它成爲一個非常容易的鏈，但它顯然有點脆弱。

如果您可以修改HTML的結構，則可以使用更多更好的選項，並且可以使用ID和數據屬性來避免遍歷DOM的開銷。

來源

2013-07-09 23:19:43

這可能做的伎倆：

$(.showcomments).on("click", function() { 
    $(this).parent().parent().find(".comments").show(); 
}

的想法是，它是設置一個點擊式回調，在內部，每個元素都會找到它的祖父母，並搜索評論部分，並顯示它。

來源

2013-07-09 23:20:06

使用jQuery擴展/摺疊項目列表

回答

相關問題