jQuery顯示更多/更少示例
[英]JQuery Show More/Less Example
問題描述
我想使用Jquery切換來執行Show More / Less屬性。 但是我的點擊功能不起作用。 我該如何解決？ 這是我的以下代碼。
<style>
.morecontent span {
display: none;
}
</style>
<script>
$(document).ready(function() {
// Configure/customize these variables.
var showChar = 100; // How many characters are shown by default
var ellipsestext = "...";
$('#seo-content').each(function() {
var content = $(this).html();
if(content.length > showChar) {
var c = content.substr(0, showChar);
var h = content.substr(showChar, content.length - showChar);
var html = c + '<span class="moreellipses">' + ellipsestext+ ' </span><span class="morecontent"><span>' + h +
'</span></span>';
$(this).html(html);
}
});
$("#seo-header").click(function(){
$(this).parent().prev().toggle();
$(this).prev().toggle();
return false;
});
});
</script>
<body>
<div id="seo-header">Click for More</div>
<div id="seo-content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
1 個解決方案
解決方案1
1 2015-01-04 17:47:16
如果您只希望具有seo-header類的每個元素切換具有seo-content類的下一個元素，則可以使用
請注意，這會將您的ID更改為類，從而使您可以將行為賦予許多元素，而不僅僅是一個
$(document).ready(function() { $('.seo-header').click(function(){ $(this).next('.seo-content').toggle(); }); });
.morecontent { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="seo-header">Click for More</div> <div class="seo-content morecontent"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <div class="seo-header">Click for More</div> <div class="seo-content morecontent"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <div class="seo-header">Click for More</div> <div class="seo-content morecontent"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <div class="seo-header">Click for More</div> <div class="seo-content morecontent"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div> <div class="seo-header">Click for More</div> <div class="seo-content morecontent"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>
使用jQuery顯示更多/更少顯示
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.