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

此代码段可能符合您的要求。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

修改了上面的代码片段，删除了额外的div并包含了一个标志。代码段显示基于像素的文本。希望这能满足您的要求。

＆＃13;

var down = 0;
$(document).ready(function() {
  var initHeight = $("#abpanel13").css('height');
  $("#abpanel13").css('height', '50px');

  $("a#abdptext13").click(function() {

    if (!down) {
      $('#abpanel13').animate({
        height: initHeight
      }, 'slow', function(e) {});
      down = 1;
    } else {
      $('#abpanel13').animate({
        height: '50px'
      }, 'slow', function(e) {});
      down = 0;
    }
  });

});

＆＃13;

#abpanel13 {
  padding: 10px;
  display: block;
  max-width: 600px;
  padding-left: 25px;
  text-align: justify;
  overflow: hidden;
  height: 100%;
}

＆＃13;

<!DOCTYPE html>
<html>

<head>

</head>

<body>
  <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="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>

</body>

</html>

＆＃13;

想在打开slideToggle之前看到一些单词

2 个答案: