我想使用 Jquery 切换来显示更多/更少属性。但是我的点击功能不起作用。我该如何解决？下面是我的代码。
<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>
最佳答案
如果您只希望具有类 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>关于javascript - JQuery 显示更多/更少示例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27768355/