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.