显示更多的功能是延迟错误的P标签,我不能使用类内的p标记,因为它来自数据库,所以我如何在类contentclass
中存储P目标?
$(document).ready(function(){
if ($('p').length > 1) {
$('p:gt(1)').hide('slow');
$('.show-more').show('slow');
}
$('.show-more').on('click', function() {
$('p:gt(1)').slideToggle('slow');
$(this).html() == 'ReedMore +' ? $(this).html('Less -') : $(this).html('ReedMore +');
});
});
.show-more {
display: none;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="contentclass">
<p>Testing some of Text</p>
<p>SecondTesting some of Text</p>
<p>ThirdTesting some of Text</p>
<p>ThirdTesting some of Text</p>
<p>ThirdTesting some of Text</p>
<div class="show-more">ReedMore +</div>
</div><!-- <div class="contentclass"> -->
<!-- i Dont Want be Target the next P teags -->
<p style="color:red;">Testing Testing Confirm its target Only First Pargraph</p>
<p style="color:red;">Testing Testing Confirm its target Only First Pargraph</p>
发布于 2020-12-15 21:04:20
您没有指定应用更改的确切位置,因为您已经直接使用p
作为选择器,因此它会对html中的所有p
标记进行更改,因此您只需添加带有p
标记的contentclass
。
演示代码:
//now only p tags which is inside content will get change
if ($('.contentclass p').length > 1) {
$('.contentclass p:gt(1)').hide('slow');
$('.show-more').show('slow');
}
$('.show-more').on('click', function() {
$('.contentclass p:gt(1)').slideToggle('slow');
$(this).html() == 'ReedMore +' ? $(this).html('Less -') : $(this).html('ReedMore +');
});
.show-more {
display: none;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="contentclass">
<p>Testing some of Text</p>
<p>SecondTesting some of Text</p>
<p>ThirdTesting some of Text</p>
<p>ThirdTesting some of Text</p>
<p>ThirdTesting some of Text</p>
<div class="show-more">ReedMore +</div>
</div>
<p style="color:red;">Testing Testing Confirm its target Only First Pargraph</p>
<p style="color:red;">Testing Testing Confirm its target Only First Pargraph</p>
https://stackoverflow.com/questions/65317454
复制相似问题