如何在單擊閱讀更多帶短文本按鈕後顯示長文本？

我在我的博客中使用手風琴面板進行長評論。現在我想將長文本添加到短文本中，並用此顯示全文，但是我遇到了問題。如果我點擊顯示按鈕，它會顯示在換行符處。如何在單擊閱讀更多帶短文本按鈕後顯示長文本？

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

我想另一部分加入到短文本不換行。

來源

2016-05-31 erginduran

'div'元素是默認塊元素，這意味着他們的內容將開始一個新行。您可能需要調整標記，以便其餘文本位於同一個塊元素中，或者添加樣式以強制短文本和全文的所有非共享祖先'div'元素具有顯示屬性'inline-block'。 – sean

添加文本的第二部分中的跨度和隱藏它，然後用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>

來源

2016-06-01 14:41:49 user1620090

如何在單擊閱讀更多帶短文本按鈕後顯示長文本？

回答

相關問題