Question

please refer to the fiddle example使用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');
        });

感谢并欢迎任何评论。

Answer 1

您的问题似乎是您在点击处理程序中添加了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/

jQuery自定义切换功能问题

1 个答案: