javascript - 想在打开 slideToggle 之前看到一些文字

Question

即使在关闭的 Toggle 上，我也想显示前 20-30 个单词。我的代码如下。

在输出页面上，我想一开始只显示几个词，然后当有人点击图标或按钮时，它应该显示完整的内容，再次点击时，它应该再次只显示前 20- 30 个字。

JavaScript/jQuery:

$(document).ready(function(){
  $("a#abdptext13").click(function(){
    $("#abpanel13").slideToggle(1000);
    return false;
  });
});

CSS:

#abpanel13{
  padding: 10px;
  display: none;
  max-width:600px;
  padding-left:25px;
  text-align:justify;
}

HTML:

<div>
<a href="#droptext" id="abdptext13"><img src="images/textdrop_03.png" width="35" height="62" align="right" id="flip"></a>
</div>
<div id="abpanel13">
Click to slide down panelClick to slide down panelClick to slide down 
panelClick to slide down panelClick to slideClick to slide down panelClick 
to slide down panelClick to slide down panelClick to slide down panelClick 
to slideClick to slide down panelClick to slide down panelClick to slide 
down panelClick to slide down panelClick to slideClick to slide down 
panelClick to slide down panelClick to slide down panelClick to slide down  
panelClick to slideClick to slide down panelClick to slide down panelClick 
to slide down panelClick to slide  down panelClick to slideClick to slide 
down panelClick to slide down panelClick to slide down panelClick to   slide 
down panelClick to slideClick to slide down panelClick to slide down 
panelClick to slide down panelClick to slide down panelClick to slideClick 
to slide down panelClick to slide down panelClick to slide down panelClick 
to slide  down panelClick to slideClick to slide down panelClick to slide 
down panelClick to slide down panelClick to slide down panelClick to slide
</div> 

Answer 1

这段代码可能会满足您的要求。

$(document).ready(function(){
  var content = $("#abpanel13").html();
  var c = content.substr(0, 30);
  $("#abpanel13temp").html(c);
 $("a#abdptext13,#abpanel13temp").click(function(){
    $("#abpanel13").slideToggle(1000);
    
    $("#abpanel13temp").slideToggle(0);
    return false;
  });
});

#abpanel13{
padding: 10px;
display: none;
max-width:600px;
padding-left:25px;
text-align:justify;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<a href="#droptext" id="abdptext13">Click Here</a>
</div>
<div id="abpanel13temp">
</div>
<div id="abpanel13">
Click to slide down panelClick to slide down panelClick to slide down 
panelClick to slide down panelClick to slideClick to slide down panelClick 
to slide down panelClick to slide down panelClick to slide down panelClick 
to slideClick to slide down panelClick to slide down panelClick to slide 
down panelClick to slide down panelClick to slideClick to slide down 
panelClick to slide down panelClick to slide down panelClick to slide down  
panelClick to slideClick to slide down panelClick to slide down panelClick 
to slide down panelClick to slide  down panelClick to slideClick to slide 
down panelClick to slide down panelClick to slide down panelClick to   slide 
down panelClick to slideClick to slide down panelClick to slide down 
panelClick to slide down panelClick to slide down panelClick to slideClick 
to slide down panelClick to slide down panelClick to slide down panelClick 
to slide  down panelClick to slideClick to slide down panelClick to slide 
down panelClick to slide down panelClick to slide down panelClick to slide
 </div>