javascript - 如何将阅读更多 - 阅读更少按钮始终放在段落末尾？

Question

我的主页上有一个多读/少读按钮，现在一切正常我只想让多读按钮总是在段落的末尾。因此，当阅读更多(closed)时，它会紧贴在第一段结尾之后，当阅读较少时(opened)，它也需要在第二段。

这是它目前的样子: 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>