使用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文本？

回答

相關問題