Jquery 用按钮动画高度变化

Question

基本上我正在做的就是制作“查看更多”类型的东西。我有一小段文字描述了我所做的事情，段落末尾有一个按钮。 I(实际上是一个链接，带有按钮样式)。当按下按钮时，div 扩展至 400px，并使用 .html() 添加额外文本；但是当我点击“查看更少”按钮折叠回较小的段落和 200px div 时，什么也没有发生。

jQuery

$(document).ready(function(){
var $mottheight = $('#row-mott').height();

if ( $mottheight == 300 ) {
    $('#mott-btn-collapse').click(function(){
    $('#row-mott').animate({
        height:200
    }, 300);
    $('#mott').html('I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. <a href="#" id="mott-btn" class="btn btn-mini">Less info &raquo</a>');

});
}
else if ( $mottheight < 300 ){
    $('#mott-btn').click(function(){
    $('#row-mott').animate({
        height:300
    }, 400);
    $('#mott').html('I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. <a href="#" id="mott-btn-collapse" class="btn btn-mini">Less info &raquo</a>');
    });
}
else {
    return 0;
}
});

Answer 1

你的函数的编码非常笨拙。您需要捕获函数内的高度，而不仅仅是在页面加载时捕获，并且您可以组合所有点击项。

var $row_mott = $('#row-mott'),
    $mott = $('#mott');

$('#mott-btn-collapse').click(function(){
    var $mottheight = $row_mott.height();

    if ($mottheight == 300) {
        $row_mott.stop().animate({height:200}, 300);
        $mott.html('I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. <a href="#" id="mott-btn" class="btn btn-mini">Less info &raquo</a>');
    } else if ($mottheight < 300){
        $row_mott.stop().animate({height:300}, 400);
        $mott.html('I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. I\'ve worked on the Warren Mott High School website since September of 2011. I am one of four student webmasters that keep the website in the best condition possible. We cannot take credit for all the coding, though. This website is run by around 40 Web Design students. As Webmaster, my job is to fix, improve, and help those students learn as they go. <a href="#" id="mott-btn-collapse" class="btn btn-mini">Less info &raquo</a>');
    }
});

注意:

• 我将您的选择器转换为缓存的变量；多次使用选择器时的好习惯
• 我在动画之前添加了 .stop()，以防止过度排队
• 我将操作合并到一个按钮中；这是更个人化的偏好，但为了获得更一致的用户体验，使用单个“展开/折叠”按钮是相当标准化的