Question

基本上我正在做的是制作一个“查看更多”类型的东西。我有一小段文字描述了我曾经做过的事情，并在段落末尾有一个按钮。我（它真的是一个链接，带有按钮样式）。按下按钮时，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()，以防止超额排队

我将动作合并为一个按钮;这是更个人的偏好，但是为了更加一致的用户体验，单个“展开/折叠”按钮非常标准化

Answer 2

您只运行一次点击处理程序。因此，在文档加载时，它会找到＃row-mott height，设置它，并评估你拥有的内容。默认情况下，它是＆lt; 300.您需要检查点击事件内的高度，而不是之前。

Answer 3

试试这个..

$(document).ready(function(){
    var $mottheight = $('#row-mott').height();
    $('#mott-btn-collapse').click(function(){
       if ( $mottheight == 300 ) {
     $('#row-mott').animate({
            height:200
        }, 300);
        $('#mott').html('I\'ve worked on the W...</a>');

    });
    }else if($mottheight < 300 ){
        $('#mott-btn').click(function(){
        $('#row-mott').animate({
            height:300
        }, 400);
        $('#mott').html('I\'ve worked on the Warren Mott....they go. <a href="#" id="mott-btn-collapse" class="btn btn-mini">Less info &raquo</a>');
        });
    }
  });

Answer 4

我明白了。这非常简单，老实说，我不知道为什么我之前没想过这个。

 $(document).ready(function(){

   $('#mott-appended').hide();
   $('#patrick-appended').hide();

   /* Start Warren Mott High School text show/hide */

   $('#mott-btn').click(function(){
    $('#mott-appended').show('slow');
    $(this).hide('slow');
   });

   $('#mott-btn-collapse').click(function(){
    $('#mott-appended').hide('slow');
    $('#mott-btn').show('slow');
   });

   /* End Warren Mott High School text show/hide */
   /* Start Patrick Studios text show/hide */

    $('#patrick-btn').click(function(){
       $('#patrick-appended').show('slow');
       $(this).hide('slow');
    });

    $('#patrick-btn-collapse').click(function(){
       $('#patrick-appended').hide('slow');
       $('#patrick-btn').show('slow');
   });

   /* End Patrick Studios text show/hide */

});

Jquery动画高度随按钮变化

4 个答案: