Question

我的主页上有一个“更多阅读/更少阅读”按钮，现在一切正常，我只想始终在本段末尾添加“更多阅读”按钮。因此，当其读入更多（关闭）时，它将紧贴在第一段的结尾处；当其读入较少的（打开）时，它也需要位于右侧第二段。

当前外观如下： enter image description here

这就是我想要的样子： enter image description here

以下是代码段：

$(function(){
	$.fn.readmore = function( options ) {

		var settings = $.extend({
			div: this,
			hideText: "Read Less...",
			readText: "Read More...",
			isTextShown: false,
			effect: true,
			effectOption: "fast",
			buttonClasses: "btn-primary opacity-rollover",
			id: "read-more-action"
		},options);

		if(settings.isTextShown === false){
			$(settings.div).hide();
			$(settings.div).parent().append("<button id='"+settings.id+"' class='"+ settings.buttonClasses +"'>"+ settings.readText + "</button>");
		}else{
			$(settings.div).parent().append("<button id='"+settings.id+"' class='"+ settings.buttonClasses +"'>"+ settings.hideText + "</button>");
		}

		$(settings.div).parent().find("#" + settings.id).bind("click.readmore", function () {
			if(settings.isTextShown === false){
				$(settings.div).parent().find("#" + settings.id).text(settings.hideText);
				if(settings.effect === true){
					$(settings.div).fadeIn(settings.effectOption);
				}else{
					$(settings.div).show();
				}
				settings.isTextShown = true;
			}else{
				$(settings.div).parent().find("#" + settings.id).text(settings.readText);
				if(settings.effect === true){
					$(settings.div).hide();
				}else{
					$(settings.div).fadeOut(settings.effectOption);
				}
				settings.isTextShown = false;
			}
		});

	};
});

		$(function(){
			$(".read-more").readmore({
				buttonClasses: "btn btn-primary",
			});
		});

	<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.1/materia/bootstrap.min.css" rel="stylesheet">
		<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
		<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    
<div class="container" style="margin-top: 2em">
	<h1>Read More/Read Less Buttons</h1>
		<article>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum metus ac semper finibus. Praesent vulputate augue ac tempus congue.
				Curabitur in sapien semper, tristique arcu eget, pharetra risus. Donec tempus aliquet purus eu lobortis.
				Etiam ac finibus felis. Integer congue sit amet neque sit amet pellentesque. Donec cursus interdum rutrum.
				Interdum et malesuada fames ac ante ipsum primis in faucibus.
			</p>
			<p class="read-more">Praesent luctus at erat at sagittis.
				Etiam posuere, erat nec laoreet ornare, odio dui mattis nisl, convallis semper ligula lectus eu turpis.
				Phasellus pharetra risus tortor, eget fringilla tortor laoreet at. Quisque egestas tristique dui. Mauris non iaculis ex.
				Ut pellentesque, massa ut molestie egestas, tortor leo imperdiet sem, vitae malesuada nibh dolor in magna. Etiam pulvinar pharetra dolor, vel dapibus ipsum commodo eget.
				Praesent turpis odio, suscipit ut ullamcorper vel, finibus at ligula. Phasellus dolor lectus, molestie a velit sed, iaculis rhoncus risus.
				Ut id pellentesque erat, quis elementum ligula. Donec dignissim diam sem, a bibendum erat mattis quis. Vivamus id erat dui. Vestibulum sollicitudin ac justo at lacinia.
			</p>
		</article>
	</div>

有任何帮助，谢谢！

Answer 1

您应该将

元素添加到

display: inline

$(function(){
	$.fn.readmore = function( options ) {

		var settings = $.extend({
			div: this,
			hideText: "Read Less...",
			readText: "Read More...",
			isTextShown: false,
			effect: true,
			effectOption: "fast",
			buttonClasses: "btn-primary opacity-rollover",
			id: "read-more-action"
		},options);

		if(settings.isTextShown === false){
			$(settings.div).hide();
			$(settings.div).parent().append("<button id='"+settings.id+"' class='"+ settings.buttonClasses +"'>"+ settings.readText + "</button>");
		}else{
			$(settings.div).parent().append("<button id='"+settings.id+"' class='"+ settings.buttonClasses +"'>"+ settings.hideText + "</button>");
		}

		$(settings.div).parent().find("#" + settings.id).bind("click.readmore", function () {
			if(settings.isTextShown === false){
				$(settings.div).parent().find("#" + settings.id).text(settings.hideText);
				if(settings.effect === true){
					$(settings.div).fadeIn(settings.effectOption);
				}else{
					$(settings.div).show();
				}
				settings.isTextShown = true;
			}else{
				$(settings.div).parent().find("#" + settings.id).text(settings.readText);
				if(settings.effect === true){
					$(settings.div).hide();
				}else{
					$(settings.div).fadeOut(settings.effectOption);
				}
				settings.isTextShown = false;
			}
		});

	};
});

		$(function(){
			$(".read-more").readmore({
				buttonClasses: "btn btn-primary",
			});
		});

	<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.1.1/materia/bootstrap.min.css" rel="stylesheet">
		<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
		<link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    
<div class="container" style="margin-top: 2em">
	<h1>Read More/Read Less Buttons</h1>
		<article>
			<p style="display: inline">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dictum metus ac semper finibus. Praesent vulputate augue ac tempus congue.
				Curabitur in sapien semper, tristique arcu eget, pharetra risus. Donec tempus aliquet purus eu lobortis.
				Etiam ac finibus felis. Integer congue sit amet neque sit amet pellentesque. Donec cursus interdum rutrum.
				Interdum et malesuada fames ac ante ipsum primis in faucibus.
			</p>
			<p class="read-more" style="display: inline">Praesent luctus at erat at sagittis.
				Etiam posuere, erat nec laoreet ornare, odio dui mattis nisl, convallis semper ligula lectus eu turpis.
				Phasellus pharetra risus tortor, eget fringilla tortor laoreet at. Quisque egestas tristique dui. Mauris non iaculis ex.
				Ut pellentesque, massa ut molestie egestas, tortor leo imperdiet sem, vitae malesuada nibh dolor in magna. Etiam pulvinar pharetra dolor, vel dapibus ipsum commodo eget.
				Praesent turpis odio, suscipit ut ullamcorper vel, finibus at ligula. Phasellus dolor lectus, molestie a velit sed, iaculis rhoncus risus.
				Ut id pellentesque erat, quis elementum ligula. Donec dignissim diam sem, a bibendum erat mattis quis. Vivamus id erat dui. Vestibulum sollicitudin ac justo at lacinia.
			</p>
		</article>
	</div>

如何在段落的末尾放置“阅读更多-减少阅读”按钮？

1 个答案: