Question

我在我的博客中使用手风琴面板进行长时间评论。现在我想在短文本中添加长文本并用此显示全文，但我有一个问题。如果我单击“显示”按钮，它将显示在换行符处。

<div class="panel-group" id="accordion">
  <div class="panel panel-default text-left" >
    <div>
      <div style="color:#000;" class="panel-body text-left"><br>This is short comment for my stack...</div>
    </div>
  </div>
  <div class="panel" >
    <div id="collapse2" class="clearfix panel-collapse collapse">
      <div class="panel-body" style="color:#000;">overflow post and i hope i can find a good solution for this
      </div>
    </div>
    <div class="panel-heading">'.
        <h5><a class="btn btn-block" data-toggle="collapse" data-parent="#accordion" href="#collapse2">Show/Hide</a>
      </h5>
    </div>
  </div>
</div>

我想在短文 中添加另一部分而不使用换行符 。

Answer 1

在一个范围中添加文本的第二部分并隐藏它，然后用JS显示它：

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script>

function showMore()
{
    if ($('#threedots').css('display')=='none')
    {
        //already showing, we hide
            $('#threedots').show();
            $('#full_desc').hide();
    }
    else
    {
            //show more
            $('#threedots').hide();
            $('#full_desc').show();

    }


}//end function 

</script>

<div style="color:#000;" class="panel-body text-left"><br>This is short comment for my stack<span id="threedots">...</span><span id="full_desc" style="display:none">overflow post and i hope i can find a good solution for this</span></div>
  <a class="btn btn-block" data-toggle="collapse" data-parent="#accordion" href="javascript:showMore()">Show/Hide</a>

如何在点击阅读带有短文本的更多按钮后显示长文本？

1 个答案: