用jquery切換div的高度

Question

我想要一個顯示'顯示更多'的鏈接，點擊時展開另一個div的高度以顯示所有內容。一旦div顯示所有的內容，我希望鏈接改變爲「顯示更少」，並在被點擊後做相反的事情。

這是我到目前爲止，但由於某種原因，它不工作，請有人可以幫忙嗎？

這是我到目前爲止有：

$(document).ready(function() { 
 
    $('.entry-content').css('height', '400px'); 
 
    $('.entry-content').css('overflow', 'hidden'); 
 
$('.show-more').click(function() { 
 
    $('.entry-content').animate({ 
 
    'height': 'auto' 
 
    }, 500); 
 
    $('.show_more').html('Show Less'); 
 
    $('.show_more').addClass('show_less'); 
 
    $('.show_more').removeClass('show_more'); 
 
}); 
 
$('.show-less').click(function() { 
 
    $('.entry-content').animate({ 
 
    'height': '400px' 
 
    }, 500); 
 
    $('.show_less').html('Show More'); 
 
    $('.show_less').addClass('show_more'); 
 
    $('.show_less').removeClass('show_less'); 
 
}); 
 
}); 
 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="entry-content"> 
 
    Curabitur sed enim sit amet nibh vulputate efficitur nec eget nulla. Vestibulum vel pulvinar magna. Etiam viverra vulputate lectus. Etiam dictum maximus ligula sed efficitur. Donec in dictum purus. Sed consequat quam eu eleifend convallis. Donec sapien 
 
    augue, volutpat ac nibh ac, molestie vulputate neque. Morbi eu fermentum est, eget vulputate quam. Phasellus et ante ipsum. Nullam tempus neque augue, nec accumsan erat hendrerit vel. Proin dolor sapien, pulvinar at rutrum quis, scelerisque vel ipsum. 
 
    Cras arcu nulla, placerat ac arcu vitae, iaculis maximus nisi. Nulla tincidunt, nisi id ultrices tempor, diam ipsum sollicitudin neque, ac consequat libero nulla eu diam. 
 
</div> 
 

 
<div class="another-div-elsewhere"> 
 
    <a href="#" class="show-more">Show More</a> 
 
</div>

Answer 1

嘗試下面的代碼片段。

$(document).ready(function() { 
 
    $('.entry-content').css({'height':'40px','overflow': 'hidden'}); 
 

 

 
    $('.show-more').on('click',function() { 
 
    if($(this).hasClass('less')){ 
 
     $('.entry-content').animate({ 
 
     'height': '40px' 
 
     }, 500); 
 
     $(this).html("Show More") 
 
    } 
 
    else{ 
 
     $('.entry-content').animate({ 
 
     'height': $(".entry-content").get(0).scrollHeight 
 
     }, 500); 
 
     $(this).html("Show Less") 
 
    } 
 
    $(this).toggleClass('less'); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="entry-content"> 
 
    Curabitur sed enim sit amet nibh vulputate efficitur nec eget nulla. Vestibulum vel pulvinar magna. Etiam viverra vulputate lectus. Etiam dictum maximus ligula sed efficitur. Donec in dictum purus. Sed consequat quam eu eleifend convallis. Donec sapien 
 
    augue, volutpat ac nibh ac, molestie vulputate neque. Morbi eu fermentum est, eget vulputate quam. Phasellus et ante ipsum. Nullam tempus neque augue, nec accumsan erat hendrerit vel. Proin dolor sapien, pulvinar at rutrum quis, scelerisque vel ipsum. 
 
    Cras arcu nulla, placerat ac arcu vitae, iaculis maximus nisi. Nulla tincidunt, nisi id ultrices tempor, diam ipsum sollicitudin neque, ac consequat libero nulla eu diam. 
 
</div> 
 

 
<div class="another-div-elsewhere"> 
 
    <a href="#" class="show-more">Show More</a> 
 
</div>

Answer 2

的主要問題似乎是您要附加的$.click()事件的ID #show-more和#show-less但你永遠不創建#show-less .. 。您切換課程.show_more和.show_less。我剛剛離開$.click()選擇器，並且正在切換類.open以確定鏈接/文本的狀態，並基於此更新鏈接文本和文本高度。

你可以鏈/組合很多這些命令，並使用變量來保存jquery一些工作，使其不必重新運行選擇器。

我還將靜態高度400px更改爲.entry-content區域的高度的一半，因爲400px在此演示中不起作用。如果它適用於您，您可以將staticHeight更改回400px，或者修改我用於滿足您需求的內容。

var $content = $('.entry-content'), 
 
    contentHeight = $content.outerHeight(), 
 
    $showMore = $('#show-more'), 
 
    staticHeight = contentHeight/2; 
 

 
$content.attr('data-height',contentHeight).css({ 
 
    'height': staticHeight, 
 
    'overflow':'hidden' 
 
}); 
 

 
$showMore.on('click',function() { 
 
    var height, text; 
 
    if ($showMore.hasClass('open')) { 
 
    $showMore.removeClass('open'); 
 
    height = staticHeight; 
 
    text = 'Show More'; 
 
    } else { 
 
    $showMore.addClass('open'); 
 
    height = contentHeight; 
 
    text = 'Show Less'; 
 
    } 
 
    $content.animate({ 
 
    'height': height 
 
    }, 500); 
 
    $showMore.html(text); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="entry-content"> 
 
Curabitur sed enim sit amet nibh vulputate efficitur nec eget nulla. Vestibulum vel pulvinar magna. Etiam viverra vulputate lectus. Etiam dictum maximus ligula sed efficitur. Donec in dictum purus. Sed consequat quam eu eleifend convallis. Donec sapien augue, volutpat ac nibh ac, molestie vulputate neque. Morbi eu fermentum est, eget vulputate quam. Phasellus et ante ipsum. Nullam tempus neque augue, nec accumsan erat hendrerit vel. Proin dolor sapien, pulvinar at rutrum quis, scelerisque vel ipsum. Cras arcu nulla, placerat ac arcu vitae, iaculis maximus nisi. Nulla tincidunt, nisi id ultrices tempor, diam ipsum sollicitudin neque, ac consequat libero nulla eu diam. 
 
</div> 
 

 
<div class="another-div-elsewhere"> 
 
<a href="#" id="show-more">Show More</a> 
 
</div>

Answer 3

你可以做這樣的事情。

$(document).ready(function(){ 
 
    $('.read-more').on('click', function(e){ 
 
     e.preventDefault(); 
 
     $('.details').show(); 
 
     $('.summary').hide(); 
 
    }) 
 
    $('.read-less').on('click', function(e){ 
 
     e.preventDefault(); 
 
     $('.summary').show(); 
 
     $('.details').hide(); 
 
    }); 
 
});

.details { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="summary"> 
 
    <p>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...</p> 
 
    <span class="read-more"> 
 
    <a href="#">Show More....</a> 
 
    </span> 
 
</div> 
 
<div class="details"> 
 
    <p>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> 
 
    <span class="read-less"> 
 
    <a href="#">Show Less....</a> 
 
    </span> 
 
</div>

Answer 4

那麼首先你必須在課堂/ ID使用的一些問題

，另一件事是，動畫高度自動不possible！還有其他的（比如CSS）這樣做的方式，但這裏是你正在嘗試做的一個工作樣本。我希望它能幫助:-)

$(document).ready(function() { 
 
    $('.entry-content').css('height', '100px'); 
 
    $('.entry-content').css('overflow', 'hidden'); 
 
}); 
 

 
$('#show_more').click(function() { 
 
    if($(this).hasClass('show_more')){ 
 
     $(this).html('Show Less'); 
 
     $('.entry-content').animate({ 
 
      'height': '200px' 
 
     }, 500); 
 
    } 
 
    else{ 
 
     $(this).html('Show More'); 
 
     $('.entry-content').animate({ 
 
      'height': '100px' 
 
     }, 500); 
 
    } 
 

 
    $(this).toggleClass('show_less'); 
 
    $(this).toggleClass('show_more'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="entry-content"> 
 
    Curabitur sed enim sit amet nibh vulputate efficitur nec eget nulla. Vestibulum vel pulvinar magna. Etiam viverra vulputate lectus. Etiam dictum maximus ligula sed efficitur. Donec in dictum purus. Sed consequat quam eu eleifend convallis. Donec sapien 
 
    augue, volutpat ac nibh ac, molestie vulputate neque. Morbi eu fermentum est, eget vulputate quam. Phasellus et ante ipsum. Nullam tempus neque augue, nec accumsan erat hendrerit vel. Proin dolor sapien, pulvinar at rutrum quis, scelerisque vel ipsum. 
 
    Cras arcu nulla, placerat ac arcu vitae, iaculis maximus nisi. Nulla tincidunt, nisi id ultrices tempor, diam ipsum sollicitudin neque, ac consequat libero nulla eu diam. 
 
    Cras arcu nulla, placerat ac arcu vitae, iaculis maximus nisi. Nulla tincidunt, nisi id ultrices tempor, diam ipsum sollicitudin neque, ac consequat libero nulla eu diam. 
 
    Cras arcu nulla, placerat ac arcu vitae, iaculis maximus nisi. Nulla tincidunt, nisi id ultrices tempor, diam ipsum sollicitudin neque, ac consequat libero nulla eu diam. 
 
Curabitur sed enim sit amet nibh vulputate efficitur nec eget nulla. Vestibulum vel pulvinar magna. Etiam viverra vulputate lectus. Etiam dictum maximus ligula sed efficitur. Donec in dictum purus. Sed consequat quam eu eleifend convallis. Donec sapien 
 
    augue, volutpat ac nibh ac, molestie vulputate neque. Morbi eu fermentum est, eget vulputate quam. Phasellus et ante ipsum. Nullam tempus neque augue, nec accumsan erat hendrerit vel. Proin dolor sapien, pulvinar at rutrum quis, scelerisque vel ipsum. 
 
</div> 
 

 
<div class="another-div-elsewhere"> 
 
    <a href="#" id="show_more" class="show_more">Show More</a> 
 
</div>