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