Question

我对javascript很新，而且我已经使用了10多个stackoverflow解决方案来处理可折叠的段落，但它们都不符合我的要求。他们中的大多数使用列表，按钮，表格css-only（我犹豫不决，因为浏览器支持问题）。我不希望链接是任何类型的按钮，我只是希望它是一个文本链接。扩大的句子也应该无缝地继续下去，而不是从下一行或任何一个开始。

我想要的是一个带有文本链接的简单段落，一旦点击就可以展开。插图：＆＃34;这句话[更多]＆＃34; - ＆GT; ＆＃34;这是一个句子并扩展了＃34;

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

目前我使用此代码但因为它处理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

检查此处是否有效。

我已将<div>，<p>代码替换为<span>，因为跨度不合适创建新行，并在我定义的js中，如果消息可见，则可点击的文本将更改为＆＃34; less＆＃34;而不是＆＃34;更多＆＃34;。要禁用＆＃34;双击文本选择＆＃34;我添加了一些CSS。

＆＃13;

$(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]");
      }
    
  })
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

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>

在段落

2 个答案: