1

请参考小提琴示例我在使用 jquery 函数切换来自定义我的需求时遇到问题。我的切换只是通过运行时间扩展 div 的高度。我有一个这样的JS代码：

    $(function () {
       $(".enlarge").click(function(){
         var btn = $(this),
             text = btn.siblings('.text'),
             collapsed = text.hasClass('collapsed'),
             height = collapsed ? text[0].scrollHeight : $('<div>', {'class': 'text collapsed'}).css('height');

             var $container = $('#container');

             var currentLargeDetailBox = btn.closest('.large-detail-box');
             var currentBigBox = btn.closest('.big-box');

             var newHeightForExpand = height - 260 + currentLargeDetailBox.height();

             text.animate({'height': height}, 400, function() {

                text.toggleClass('collapsed'); 
                text.css('height', ''); 
                btn.text(collapsed ? 'Show Less' : '...(Show More)');

             });

         btn.toggle(function () {           
            currentLargeDetailBox.height(newHeightForExpand);
            currentBigBox.height(newHeightForExpand);
            $container.isotope('reLayout');
         }, function () {
            currentLargeDetailBox.css('height', '');
            currentBigBox.css('height', '');
            $container.isotope('reLayout');
        });

  });   
});

有人可以看到我的代码的问题并告诉我吗？奇怪的是，如果我使用“文本”而不​​是“btn”，自定义切换功能就会起作用。像这样：

        text.toggle(function () {           
            currentLargeDetailBox.height(newHeightForExpand);
            currentBigBox.height(newHeightForExpand);
            $container.isotope('reLayout');
         }, function () {
            currentLargeDetailBox.css('height', '');
            currentBigBox.css('height', '');
            $container.isotope('reLayout');
        });

感谢并欢迎任何评论。

4

1 回答 1

0

您的问题似乎是您在点击处理程序中添加了事件btn.toggle处理程序 - 这不仅意味着它在第一次点击时不可用，而且您在每次后续点击时添加另一个事件处理程序。 .toggle

尝试使用if (collapsed)您已有的布尔测试：

$(".enlarge").click(function () {
  var btn = $(this),
    text = btn.siblings('.text'),
    collapsed = text.hasClass('collapsed'),
    height = collapsed ? text[0].scrollHeight : $('<div>', {
      'class': 'text collapsed'
    }).css('height');

  var currentLargeDetailBox = btn.closest('.large-detail-box');
  var newHeightForExpand = height - 260 + currentLargeDetailBox.height();

  text.animate({
    'height': height
  }, 400, function () {
    text.toggleClass('collapsed');
    text.css('height', '');
    btn.text(collapsed ? 'Show Less' : '...(Show More)');
  });

  if (collapsed) {
    alert("1");
    currentLargeDetailBox.height(newHeightForExpand);
  } else {
    alert("2");
    currentLargeDetailBox.css('height', '');
  }
});

http://jsfiddle.net/mblase75/pkjpt/

于 2013-01-09T22:47:36.960 回答