帶預設關閉高度的下拉列表打破動態高度變量

我試圖得到一個盒子列表，所有的變量都是高度可以在一個函數上用.animate（）隱藏/顯示內容。我試圖用.height（）工作來獲取內容框的高度......但是我還需要將框高設置爲從0px開始，以便頁面加載並且框被關閉以開始。

問題隨着變量的不良而出現。我可以讓事情起作用，但只要我將所有框設置爲從0px開始（全局）...我設置的變量單擊以查找內容大小查找我爲初始狀態設置的0px的大小...所以箱子可以關閉，但沒有高度重新開放。

如果你在我JSFIDDLE註釋掉的第一行，像下面，你可以看到它的排序工作：

//$(".className").find("p").not(".trigger").css({height: '0px'});

BTW：我知道我有$（本）作出的選擇方式。。父（）BLA（）BLA（）BLA（）。;是不是選擇這些項目的最有效的方式，但我的網站實際代碼更復雜，我想保持它類似。謝謝！

來源

2014-06-26 mike

下面是做到這一點的一種方法：

/** Set up an object. **/ 
var allElementHeightsOriginally = { 
             heights: {} 
            }; 
var triggerElementHeight = $(".trigger").height(); 
/** Add the original heights to the object, along with the element indices. **/ 
$(".className").each(function (index, element) { 
    allElementHeightsOriginally.heights[index] = { 
     index: index, 
     original: ($(element).height()-triggerElementHeight) 
    }; 
}); 
/** Your click event. **/ 
$(".trigger").click(function() { 
    var indexClicked = $(".trigger").index(this); 
    var theElement = $(this).parent().find("p").not(".trigger"); 
    $.each(allElementHeightsOriginally.heights, function (theKey, valueArray){ 
     if(indexClicked == theKey){ 
      var height = valueArray.original; 
      $selected = $(theElement); 
      if ($(theElement).hasClass('toggle')) { 
       $selected.stop().animate({height:"0px"}); 
       $(theElement).removeClass('toggle'); 
      } else { 
       $selected.stop().animate({height: height + 'px' }); 
       $(theElement).addClass('toggle'); 
      } 
     } 
    }); 
}); 
/** Collapse by default. **/ 
$("p").not(".trigger").css({height: '0px'});

我不知道代碼是否遵循以上最佳做法，但它肯定是工作！

來源

2014-06-26 09:31:57 TribalChief

帶預設關閉高度的下拉列表打破動態高度變量

回答

相關問題