單獨顯示/隱藏多個元素的顯示/隱藏行爲

我已閱讀之前有關使用jQuery單獨顯示/隱藏多個元素的問題，但我無法修改可用於這些用戶的代碼，爲我的情況。單獨顯示/隱藏多個元素的顯示/隱藏行爲

這裏的故障：

頁將有多個博客文章
每篇博客文章都會有一個顯示帖子摘錄了「查看更多」鏈接
當「顯示更多」的默認行爲點擊一個帖子的鏈接，帖子摘錄應該被隱藏，並且Full Post內容應該在底部顯示一個「Show Less」鏈接（應該只發生在單個帖子實例上，所以我已經設置了我的代碼以包含一個自定義ID，但也許我把它放在了錯誤的地方？）
單擊單個帖子的「顯示更少」鏈接時，應該隱藏完整發布內容，並且帖子摘錄應該隨着底部的「顯示更多」鏈接重新出現（同樣，應該只發生在單個帖子實例上，而不是影響在同一時間的所有帖子）

問題：從代碼的實際結果低於最後也做了以下內容：當

互換的帖子摘錄的全部內容，符合市場預期，單擊「顯示更多」鏈接
當「顯示更少」鏈接爲「顯示更少」鏈接時，不會交換郵件摘要的完整內容點擊

任何想法爲什麼？我對jQuery並不擅長;我傾向於在對現有代碼示例進行破解時最好地學習代碼，所以我仍然在努力瞭解導致此行爲的原因，而不是預期的行爲。

帖子索引的實際HTML使用了很多CMS模板特定的代碼，如果我將它包含在內，可能沒有意義，所以我已經用最少的生成內容代替了它。我已經添加了jQuery和HTML我設置爲我下面的測試目的...

<html> 
<head> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
</head> 
<body> 

    <script type="text/javascript"> 
    $(document).ready(function(){ 
    $('#full-3434').hide(); 
     $('.show-more').click(function() { 
      var id = $(this).attr('id'); 
     $('#excerpt-' + id).hide(); 
     $('#full-' + id).show(); 
    }); 
     $('.show-less').click(function() { 
      var id = $(this).attr('id'); 
     $('#full-' + id).hide(); 
     $('#excerpt-' + id).show(); 
    }); 
    }); 
    </script> 

<div class="entry-body"> 
    <div class="excerpt" id="excerpt-3434"> 
     <p>Post Excerpt Here. This will disappear when the "Show More" 
     link is clicked and the Full Post Content will display instead.</p> 
     <p><a href="#" class="show-more" id="3434">Show More</a></p> 
    </div> 

    <div class="full" id="full-3434"> 
     <p>Full Post Content Here. This will be hidden by default. When 
     the "Show Less" link is clicked, the Full Post Content will 
     disappear and Post Excerpt will reappear.</p> 

     <p><a href="#" class="show-less" id="3434">Show Less</a></p> 
    </div> 
</div> 

</body> 
</html>

任何和所有幫助表示讚賞！：D

來源

2011-12-03 Brianna

您的代碼，複製和粘貼工作正常[jsFiddle]（http://jsfiddle.net/czarchaic/aHC6b/） – czarchaic

是的，它在我的測試中爲我工作，但是當有多個實例，每個都有獨特的ID，它會停止。我在下面給出了一個可行的解決方案，但我很感激你花時間爲我測試了它！ :) – Brianna

HTML中基本的東西之一是：你應該只有一個具有相同ID的元素。

的你的問題的解決方案可以是具有這個網站：

<div id="3434" class="entry-body"> 
<div class="excerpt"> 
    <p>Post Excerpt Here. This will disappear when the "Show More" 
    link is clicked and the Full Post Content will display instead.</p> 
    <p><a href="#" class="show-more">Show More</a></p> 
</div> 

<div class="full"> 
    <p>Full Post Content Here. This will be hidden by default. When 
    the "Show Less" link is clicked, the Full Post Content will 
    disappear and Post Excerpt will reappear.</p> 

    <p><a href="#" class="show-less">Show Less</a></p> 
</div> 
</div>

，這身體功能

$('#3434 .full').hide(); 
    $('.show-more').click(function() { 
     var id = $(this).closest('.entry-body').attr('id'); 
    $('#' + id + ' .excerpt').hide(); 
    $('#' + id + ' .full').show(); 
}); 
    $('.show-less').click(function() { 
     var id = $(this).closest('.entry-body').attr('id'); 
    $('#' + id + ' .full').hide(); 
    $('#' + id + ' .excerpt').show(); 
});

，但是這仍然是笨拙的。您可以從CSS甚至需要更多的力量和這種風格：

.entry-body .more .full, .entry-body .less .excerpt { display: block } 
.entry-body .more .excerpt, .entry-body .less .full { display: none }

你也可以讓身體機能的：

$('#3434').addClass('less'); 
    $('.show-more').click(function() { 
     var post = $(this).closest('.entry-body'); 
    post.removeClass('less'); 
    post.addClass('more'); 
}); 
    $('.show-less').click(function() { 
     var post = $(this).closest('.entry-body'); 
    post.removeClass('more'); 
    post.addClass('less'); 
});

這通過簡單地交換類做了所有的變化，讓你做很多在CSS中的一個帖子的兩個狀態之間的更多變化，不僅僅是「顯示」/「隱藏」。

編輯：

如果你換$('#3434').addClass('less')與$('.entry-body').addClass('less')你有很好的常規自包含的代碼，沒有任何使用任何醜陋的ID和適用於任何數量的頁面上的帖子。

來源

2011-12-03 22:42:35

我必須稍微嘗試一下。感謝您抽出時間深入響應，Herby！ – Brianna

它工作得很好，Herby！非常感謝您的幫助。 :)我也能順利地插入一些額外的功能，以單擊時顯示，但我沒有你最初的幫助，我不能做到這一點。 – Brianna

請參閱答案底部的編輯。 – 2011-12-04 10:46:18

單獨顯示/隱藏多個元素的顯示/隱藏行爲

回答

相關問題