在段落内展开

Question

我是 javascript 的新手，我一直在使用 10 多个 Whosebug 解决方案来解决可折叠段落，但其中 none 符合我的要求。他们中的大多数使用列表、按钮、表格 css-only（我很犹豫，因为浏览器支持问题）。我不希望 link 是任何类型的按钮，我只希望它是文本 link。扩展后的句子也应该无缝地继续，而不是从下一行或其他任何地方开始。

我想要的是一个简单的段落，里面有一个文本link，点击后可以展开。插图： "this is a sentence [more]" -> "this is a sentence and expanded"

我需要它在展开的句子上再次单击时切换回来。

目前我正在使用这段代码，但因为它处理 div，所以我在实现无缝段落方面遇到了问题。（我需要扩展后的文本看起来像是在继续句子，而不是中断或下一行。）

脚本

$(document).ready(function(){
$("#button-1").click(function(){
      $("#special1").toggle()
})
})
</script>

和html

<h2>This is a sentence<div id="button-1">[more]</h2>
<p id="special1">blah
blah </p>
</div>

和css

#special1{ display: none;}

Answer 1

在这里检查它是否正常工作。

I have replaced<div>, <p> tags with <span> because span don't create new line, And in the js i have defined, if message visible then clickable text will be changed to "less" instead of "more". To disable "double-click-text-selection" i have added some css.

$(document).ready(function(){
  $("#button-1").click(function(){
      $("#special1").toggle()
      var isVisible = $( "#special1" ).is( ":visible" );
      if(isVisible){
        $("#button-1").html("[less]");
      }else{
        $("#button-1").html(" [more]");
      }
    
  })
})

#special1{ display: none;}
#button-1{
  cursor:pointer;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</script>

<p>This is a sentence <span id="special1">blah
blah </span><span id="button-1"> [more]</span></p>

Answer 2

<script type='text/javascript'
 src='https://code.jquery.com/jquery-1.12.4.min.js'>
</script>

<script>
function ShowFull(x)
{
 $('#full').toggle(x);
 $('#short').toggle(!x);
}
</script>

This is a sentence <span id='short' onclick='ShowFull(1)'>[more]</span>
<span id='full' onclick='ShowFull(0)' style='display:none'>and expanded.</span>

在段落内展开

Expanding within a paragraph

javascript

collapsable

paragraph