Javascript 如何将“多读-少读”按钮始终放在段落末尾?

Javascript 如何将“多读-少读”按钮始终放在段落末尾?,javascript,html,css,Javascript,Html,Css,我的主页上有一个“多读/少读”按钮,现在一切都很好,我只想让“多读”按钮始终位于段落的末尾。因此,当它的read more(关闭)将粘贴在第一段末尾之后,当它read less(打开)时,它也需要位于第二段的右侧 这就是它当前的样子: 这就是我想要的样子: 下面是代码片段: $(函数(){ $.fn.readmore=函数(选项){ 变量设置=$.extend({ div:这个, hideText:“少读…”, readText:“阅读更多…”, 结果显示:错误, 效果:对,, 有效选项:

我的主页上有一个“多读/少读”按钮,现在一切都很好,我只想让“多读”按钮始终位于段落的末尾。因此,当它的read more(关闭)将粘贴在第一段末尾之后,当它read less(打开)时,它也需要位于第二段的右侧

这就是它当前的样子:

这就是我想要的样子:

下面是代码片段:

$(函数(){
$.fn.readmore=函数(选项){
变量设置=$.extend({
div:这个,
hideText:“少读…”,
readText:“阅读更多…”,
结果显示:错误,
效果:对,,
有效选项:“快速”,
按钮类:“btn主不透明度翻转”,
id:“阅读更多操作”
},选项);
如果(settings.istextShowed==false){
$(settings.div).hide();
$(settings.div).parent().append(“+settings.readText+”);
}否则{
$(settings.div).parent().append(“+settings.hideText+”);
}
$(settings.div).parent().find(#“+settings.id).bind(“click.readmore”,函数(){
如果(settings.istextShowed==false){
$(settings.div).parent().find(“#”+settings.id).text(settings.hideText);
如果(settings.effect==true){
$(settings.div).fadeIn(settings.effectOption);
}否则{
$(settings.div).show();
}
settings.istextShowed=true;
}否则{
$(settings.div).parent().find(“#”+settings.id).text(settings.readText);
如果(settings.effect==true){
$(settings.div).hide();
}否则{
$(settings.div).fadeOut(settings.effectOption);
}
settings.istextShowed=false;
}
});
};
});
$(函数(){
$(“.read more”).readmore({
按钮分类:“btn btn主要”,
});
});

多读/少读按钮

Lorem ipsum dolor sit amet,是一位杰出的献身者。这是一句至理名言。这句话的意思是:“我的朋友,我的朋友。”。
萨皮恩·森佩尔的库拉比图尔、特里斯蒂克·阿尔库·埃吉特、法雷特拉·里苏斯。请给我一杯啤酒。
埃蒂亚姆·菲尼布斯·费利斯。Integer congue坐在amet neque坐在amet Pellentsque。杜内克草。
在faucibus中,Interdum和malesuada在第一次同侧前就出名了。

Praesent luctus在射手座的埃拉特。 波苏尔、拉奥里特·奥纳雷、奥迪奥·杜伊·马蒂斯·尼什、康瓦利斯·塞姆佩尔·莱古拉·欧尔皮斯。 Phasellus pharetra risus tortor,eget fringilla tortor laoreet在。酒后驾车。Mauris non iaculis ex。 佩伦茨克、埃吉斯塔、利奥玉米饼、麦格纳的玛莱苏达·尼布·多洛生命。这是一种很好的治疗方法。 在利古拉的菲尼布斯,我们将在奥迪奥、乌拉姆科佩尔和菲尼布斯等地举行会议。多勒-莱克图斯,维利特-塞德,里克勒斯。 我是佩伦茨克人,是舌苔元素。Donec dignissim diam sem,一个由mattis quis设计的bibendum。维瓦摩斯酒后驾车。拉齐尼亚的前庭。


您应该添加到元素中

display: inline
$(函数(){
$.fn.readmore=函数(选项){
变量设置=$.extend({
div:这个,
hideText:“少读…”,
readText:“阅读更多…”,
结果显示:错误,
效果:对,,
有效选项:“快速”,
按钮类:“btn主不透明度翻转”,
id:“阅读更多操作”
},选项);
如果(settings.istextShowed==false){
$(settings.div).hide();
$(settings.div).parent().append(“+settings.readText+”);
}否则{
$(settings.div).parent().append(“+settings.hideText+”);
}
$(settings.div).parent().find(#“+settings.id).bind(“click.readmore”,函数(){
如果(settings.istextShowed==false){
$(settings.div).parent().find(“#”+settings.id).text(settings.hideText);
如果(settings.effect==true){
$(settings.div).fadeIn(settings.effectOption);
}否则{
$(settings.div).show();
}
settings.istextShowed=true;
}否则{
$(settings.div).parent().find(“#”+settings.id).text(settings.readText);
如果(settings.effect==true){
$(settings.div).hide();
}否则{
$(settings.div).fadeOut(settings.effectOption);
}
settings.istextShowed=false;
}
});
};
});
$(函数(){
$(“.read more”).readmore({
按钮分类:“btn btn主要”,
});
});

多读/少读按钮

Lorem ipsum dolor sit amet,是一位杰出的献身者。这是一句至理名言。这句话的意思是:“我的朋友,我的朋友。”。 萨皮恩·森佩尔的库拉比图尔、特里斯蒂克·阿尔库·埃吉特、法雷特拉·里苏斯。请给我一杯啤酒。 埃蒂亚姆·菲尼布斯·费利斯。Integer congue坐在amet neque坐在amet Pellentsque。杜内克草。 在faucibus中,Interdum和malesuada在第一次同侧前就出名了。

Praesent luctus在埃拉特和射手座。 波苏尔、拉奥里特·奥纳雷、奥迪奥·杜伊·马蒂斯·尼什、康瓦利斯·塞姆佩尔·莱古拉·欧尔皮斯。 Phasellus pharetra risus tortor,eget fringilla tortor laoreet在。酒后驾车。Mauris non iaculis ex。 佩伦茨克、埃吉斯塔、利奥玉米饼、麦格纳的玛莱苏达·尼布·多洛生命。这是一种很好的治疗方法。 在利古拉的菲尼布斯,我们将在奥迪奥、乌拉姆科佩尔和菲尼布斯等地举行会议。多勒-莱克图斯,维利特-塞德,里克勒斯。 我是佩伦茨克人,是舌苔元素。Donec dignissim diam sem,一个由mattis quis设计的bibendum。维瓦摩斯酒后驾车。拉齐尼亚的前庭。


这很好,但是现在文本在一起了,我希望它分开,而且当我添加填充时,按钮也会消失。我怎样才能解决这个问题?谢谢你