0
Show More/Less 속성을 사용하려면 Jquery 토글을 사용하고 싶습니다. 하지만 내 클릭 기능이 작동하지 않습니다. 어떻게 해결할 수 있습니까? 여기 내 코드는 다음과 같습니다. 그냥 클래스 seo-content와 다음의 요소를 전환 클래스 seo-header 각 요소를 원하는 경우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-content '). 각 (...) ID ***는 문서 컨텍스트에서 고유해야합니다. 중복 ID를 사용하고 있습니까? –
"클릭"처리기는 클릭 된 요소의 부모의 이전 형제 요소 및 클릭 된 요소 자체에 영향을 주도록 작성되었습니다. 그러나 귀하의 "content"블록은 ** 헤더 뒤에옵니다 **. – Pointy
클래스로 사용했지만 결과가 변경되지 않았습니다. – berry