jquery - 显示和隐藏一个问题的文本功能。如何删除最初的“少显示”元素?
问题描述
代码按应有的方式运行。
我很难弄清楚如何最初从显示屏上隐藏“少显示”按钮。
我在这里所做的只是抓住第一段并隐藏其余部分以在单击继续阅读按钮后显示。但是,显示较少按钮最初显示在显示屏上。我想弄清楚如何删除它。我试着用 .html 方法把它拿走,但它根本没有出现。
有什么建议么?
jQuery(function() {
//Read more / read less text functionality. Add "minimize" to any paragraph of text.
var wrapPara = jQuery('.minimize p').nextAll().wrapAll('<div class="hide-body">');
var minimized_elements = jQuery('.minimize > p:first-child');
var continueReading = '<a href="#" class="btn btn-success mr-3 more">Continue reading</a>';
var showLess = '<a href="#" class="btn btn-success less">Show less</a>';
minimized_elements.each(function() {
jQuery(this).html(
minimized_elements.text() + '<span>... </span>' + continueReading + " " + showLess
).appendTo(".minimize");
});
jQuery('a.more', minimized_elements).click(function(event) {
event.preventDefault();
jQuery(this).toggle();
jQuery(this).next().show();
jQuery(".hide-body").show();
});
jQuery('a.less', minimized_elements).click(function(event) {
event.preventDefault();
jQuery(this).toggle();
jQuery(this).prev().show().prev().show();
jQuery(".hide-body").hide();
jQuery(".less").show();
});
});
.hide-body {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="minimize">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tenetur minus omnis expedita
at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea hic recusandae tenetur eos harum accusamus, fugiat quas quasi nulla nobis, sed tempora eveniet consequatur. Enim autem recusandae, iste est aut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea hic recusandae tenetur eos harum accusamus, fugiat quas quasi nulla nobis, sed tempora eveniet consequatur. Enim autem recusandae, iste est aut.</p>
</div>
解决方案
您希望Show less
最初隐藏链接,因此只需style="display:none;"
在下面添加它html
。
var showLess = '<a href="#" class="btn btn-success less" style="display:none;">Show less</a>';
此外,我认为一旦用户展开该段落,然后单击Show less
该hide
链接即可。所以我评论了jQuery(".less").show();
行。
完整代码如下。你可以测试一下。
jQuery(function() {
//Read more / read less text functionality. Add "minimize" to any paragraph of text.
var wrapPara = jQuery('.minimize p').nextAll().wrapAll('<div class="hide-body">');
var minimized_elements = jQuery('.minimize > p:first-child');
var continueReading = '<a href="#" class="btn btn-success mr-3 more">Continue reading</a>';
var showLess = '<a href="#" class="btn btn-success less" style="display:none;">Show less</a>';
minimized_elements.each(function() {
jQuery(this).html(
minimized_elements.text() + '<span>... </span>' + continueReading + " " + showLess
).appendTo(".minimize");
});
jQuery('a.more', minimized_elements).click(function(event) {
event.preventDefault();
jQuery(this).toggle();
jQuery(this).next().show();
jQuery(".hide-body").show();
});
jQuery('a.less', minimized_elements).click(function(event) {
event.preventDefault();
jQuery(this).toggle();
jQuery(this).prev().show().prev().show();
jQuery(".hide-body").hide();
// jQuery(".less").show(); // Commented to hide show less link once it clicked.
});
});
.hide-body {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="minimize">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat. Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tenetur minus omnis expedita
at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea hic recusandae tenetur eos harum accusamus, fugiat quas quasi nulla nobis, sed tempora eveniet consequatur. Enim autem recusandae, iste est aut.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam, magni nam eum ipsa explicabo qui, cumque totam repellat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea hic recusandae tenetur eos harum accusamus, fugiat quas quasi nulla nobis, sed tempora eveniet consequatur. Enim autem recusandae, iste est aut.</p>
</div>
推荐阅读
- rest - 错误 SoftLayer_Exception_Public。(SoftLayer_Dns_Domain_Registration:: modifyContact)
- flutter - 错误缺少“StatefulWidget.createState”的具体实现。尝试实现缺少的方法,或使类抽象
- javascript - Typescript: AST / TypeChecker,获取解析后的类型,所有属性
- javascript - 如何跟踪功能的完成并添加点击事件处理程序?
- draw.io - diagrams.net:翻转双列直插式 IC 时如何避免颠倒的引脚文本
- javascript - React:将函数传递给 React 道具,但在组件中访问它时出错
- python - 来自codingbat的Make_bricks
- c# - 更改第三方 dll 的引用
- html - CSS :read-only 应用于非只读元素
- php - 循环遍历数组递归 PHP