使用jQuery slideToggle时如何显示一点DIV文本？

-2

我有我想显示几个用户评论的网页。我想展示第一个几行，然后（使用jQuery）让用户展开以查看全部内容，然后折叠以将其重新放回到前几行。使用jQuery slideToggle时如何显示一点DIV文本？

我使用的jQuery slideToggle方法很好，但是，它折叠到没有显示任何东西。我想崩溃（如我所说）的第一对夫妇（或50px高度或其他）。

感谢您的任何帮助。

2017-05-09 user3267781

jQuery slideToggle方法设置显示：无，所以你不能在这一个设置高度。你可以尝试在jquery中设置高度的东西。 – tech2017

可能重复的[是否可以滑动切换div放宽和设置最小高度？]（http://stackoverflow.com/questions/8464899/is-it-possible-to-slidetoggle-a-div-with -easing和设置-A-最小高度） – kolunar

的jQuery：$(".comment:nth-child(n+3)").slideToggle();

CSS：.comment:nth-child(n+3){ display: none;};。
这是一个可能的解决方案，因为它只会针对不是前三个孩子的评论。的缺点是，它会分别切换其中的每一个。

来源

2017-05-09 15:38:05

-1

var toggleMinHeight = 30, 
 
    duration = 2000, 
 
    easing = 'swing'; 
 
$('.toggleDiv').each(
 
    function(){ 
 
     $(this).attr('data-height',$(this).height()); 
 
    }).click(
 
    function(){ 
 
     var curH = $(this).height(); 
 
     if ($(this).is(':animated')){ 
 
      return false; 
 
     } 
 
     else if (curH == $(this).attr('data-height')) { 
 
      $(this).animate(
 
       { 
 
        'height' : toggleMinHeight 
 
       }, duration, easing); 
 
     } 
 
     else if (curH == toggleMinHeight){ 
 
      $(this).animate(
 
       { 
 
        'height' : $(this).attr('data-height') 
 
       }, duration, easing); 
 
     } 
 
    });

.toggleDiv { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 25%; 
 
    margin: 0 1%; 
 
    border: 1px solid #ccc; 
 
    border-bottom: 10px solid #ccc; 
 
    padding: 0.5em; 
 
    overflow: hidden; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="toggleDiv"> 
 
    <p>click on text to slide toggle 
 

 

 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum..</p> 
 
</div>

来源

2017-05-09 15:40:53

为了这个目的，你可以使用readmore.js

这是很容易使用$('#target').readmore();

<div id="target">Some long text here</div>

详见这里Readmore.js

FIDDLE：看到它在行动here

来源

2017-05-09 15:47:04

使用jQuery slideToggle时如何显示一点DIV文本？

回答

相关问题