1

jquery関数toggleを使用してニーズをカスタマイズするときに問題が発生するフィドルの例を参照してください。私のトグルは、実行時に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」を使用すると、カスタムトグル機能が機能します。このような：

        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 に答える