jQuery的點擊（函數（））不使用可變首先點擊

我有這個小腳本：jQuery的點擊（函數（））不使用可變首先點擊

var $totalHeight; 

$(document).ready(function() { 
    $totalHeight = $('#sidebar-container').innerHeight(); 
    $('.sidebar-heading').each(function() { 
     $totalHeight = ($totalHeight - $(this).outerHeight()); 
    }); 

    $('.sidebar-contents').each(function() { 
     if ($(this).hasClass('active')) { 
      $(this).css('height',$totalHeight); 
     } 
    }); 

    $('.sidebar-heading').click(function() { 
     $('.sidebar-contents').slideUp().removeClass('active').addClass('inactive')/*.css('height','').removeAttr('style')*/; 
     $('.sidebar-heading').removeClass('active')/*.next().slideUp()*/; 
     $(this).addClass('active').next().addClass('active').removeClass('inactive').css('height',$totalHeight).slideDown(); 
    }); 
});

我敢肯定很明顯它是什麼應該做的。

我的問題是：第一次點擊('.sidebar-heading')不適用於其兄弟姐妹所需的$totalHeight。以下點擊，它的確如此。我究竟做錯了什麼？

我有a draft-HTML with this code in action。我評論了上面的那些部分來檢查錯誤是在哪裏，但無論如何都無法弄清楚。

來源

2013-01-18 rob_st

似乎工作正常。也許你做**需要更加明確地表達你期望它做什麼以及它實際上在做什麼。 –

看看這個[FIDDLE]（http://jsfiddle.net/z62tr/）..第一次點擊並不能擴展全高..但是每隔一個點都不會 –

內容區域應該始終處於全高。「非活動」標題元素應該位於頂部或底部。不在中間。通過第一次點擊，以下標題元素位於中間的某處，而不是容器的底部。 –

你也可以讓fx函數自己設置高度以避免@ LeeMeador的answer中提到的衝突。

由於了slideDown（）不接受任何CSS值，我們可以使用動畫（）功能，而不是直接。

$('.sidebar-heading').click(function() { 
    $('.sidebar-heading').removeClass('active'); 
    $('.sidebar-contents').removeClass('active').addClass('inactive').stop().animate({ height: '0px' }); 
    $(this).addClass('active').next().addClass('active').removeClass('inactive').stop().animate({ height: $totalHeight + 'px' }); 
});

此外，使用停止（）之前執行任何動畫，以防止怪異的行爲，如果你請再次點擊標題，而以前的動畫還沒有完成。

修改jsfiddle：http://jsfiddle.net/z62tr/4/

來源

2013-01-18 20:09:51 runTarm

我也想過使用** animate（）**的方法。感謝這個解決方案。乍一看，它適用於我:-) –

slideUp（）動畫在完成後需要一段時間才能運行並清除所有高度並顯示樣式。這會擦除您在接下來兩行中所做的設置。

試着等待，直到完成其他的slideUp（）。

$('.sidebar-heading').click(function() { 
     var self = this; 
     $('.sidebar-contents').slideUp(undefined, function() { 
      $('.sidebar-heading').removeClass('active')/*.next().slideUp()*/; 
      $(self).addClass('active') 
       .next().addClass('active').removeClass('inactive') 
       .css('height',$totalHeight).slideDown(); 
     }).removeClass('active').addClass('inactive') 
     /*.css('height','').removeAttr('style')*/; 
    });

我想通了這一點通過在Chrome與調試運行，並注意到，樣式是在一個奇怪的方式發生變化。即使代碼正在清除，第二個標題上的第一次點擊仍會在第一個標題上設置高度。這意味着某件事可能會導致錯誤。所以我在有人設置的jsFiddle上試了上面的代碼。瞧......

來源

2013-01-18 18:22:28

可能從小提琴中複製了一些錯誤。複製的行太多。我修復它。 –

我想我只是因缺乏縮進而感到困惑。 FTFY。 –

你能提供固定小提琴嗎？我希望看到您的修復程序生活。 –

jQuery的點擊（函數（））不使用可變首先點擊

回答

相關問題