你的HTML
<div class="articles">
<h3>Article Title 1</h3>
<div class="summary">
This is the summary for Article 1.
</div>
<span class="static" style="display:none;">Show Summary</span>
<span class="toggler">Show Summary</span>
</div>
<div class="articles">
<h3>Article Title 2</h3>
<div class="summary">
This is the summary for Article 2.
</div>
<span class="static" style="display:none;">Show Summary</span>
<span class="toggler">Show Summary</span>
</div>
<div class="articles">
<h3>Article Title 3</h3>
<div class="summary">
This is the summary for Article 3.
</div>
<span class="static" style="display:none;">Show Summary</span>
<span class="toggler">Show Summary</span>
</div>
<div class="articles">
<h3>Article Title 4</h3>
<div class="summary">
This is the summary for Article a.
</div>
<span class="static" style="display:none;">Show Summary</span>
<span class="toggler">Show Summary</span>
</div>
<div class="articles">
<h3>Article Title 5</h3>
<div class="summary">
This is the summary for Article 5.
</div>
<span class="static" style="display:none;">Show Summary</span>
<span class="toggler">Show Summary</span>
</div>
你的jQuery ..
jQuery(document).ready(function($) {
$('.toggler').click(function() {
var _currentext = $('.toggler').html();
if(_currentext == "Show Summary") {
$('.toggler').html("Hide Summary");
$('.static').hide();
} else {
$('.toggler').html("Show Summary");
$('.static').html("Hide Summary");
$('.static').show();
}
$('.summary').not($(this).prev()).slideUp();
$(this).prev('.summary').slideToggle('slow');
});
});
文字将出现在“Articile Title”下面。现在让你的CSS放置。
它从“显示...”更改为“隐藏...”,但当鼠标离开每个物品容器时,“隐藏摘要”文本将消失。我希望“隐藏摘要”将保留在那里,直到我将其隐藏。 – bloggerious 2012-03-02 15:17:13