javascript - 在段落内展开

Question

我对 javascript 相当陌生，我已经尝试过 10 多个 stackoverflow 解决方案来解决可折叠段落，但没有一个符合我的要求。他们中的大多数仅使用列表、按钮、表格(我很犹豫，因为浏览器支持问题)。我不希望链接是任何类型的按钮，我只想它是文本链接。扩展的句子也应该无缝地继续，而不是从下一行或其他任何地方开始。

我想要的是一个简单的段落，里面有一个文本链接，一旦点击就可以展开。插图: “这是一个句子[更多]”->“这是一个句子并展开”

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

目前我正在使用这段代码，但因为它处理 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>