1

基本上我正在做的是制作“查看更多”类型的东西。我有一小段文字描述了我从事的工作，并在段落末尾有一个按钮。我（它真的是一个链接，带有按钮样式）。当按下按钮时，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;
}
});
4

4 回答 4

4

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

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()在你的动画之前添加了，以防止过度排队
  • 我将动作合并到一个按钮中；这更符合个人喜好，但为了获得更一致的用户体验，使用单个“展开/折叠”按钮是非常标准化的
于 2013-04-25T17:33:44.707 回答
0

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

于 2013-04-25T17:35:46.230 回答
0

试试这个..

$(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>');
        });
    }
  });
于 2013-04-25T17:38:46.923 回答
0

我想到了。这非常简单，老实说，我不知道为什么我以前没有想到这一点。

 $(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 */

});
于 2013-04-27T22:27:10.353 回答