下拉列表预设闭合高度打破动态高度变量

dropdown list with preset closed height breaking dynamic height variable

本文关键字：高度 动态 变量 下拉列表      更新时间：2023-09-26

为什么呢?

我试图得到一个列表的框，所有的可变高度，能够隐藏/显示的内容与。animate()在一个函数。我试图得到与。height()的内容框的高度，它的工作…然而，我还需要将方框的高度设置为0px，这样页面就可以加载，并且方框一开始就关闭。

问题出现在我对变量不好。我可以让事情工作，但一旦我设置所有的盒子开始在0px(全局)…我在Click to find content size上设置的变量找到了我为初始状态设置的0px的大小…因此，盒子可以关闭，但没有重新打开的高度。

如果您注释掉JSFIDDLE中的第一行，如下所示，您可以看到它正在工作:

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

顺便说一句:我知道我用$(this).parent().bla().bla().bla() .bla()创建选择器的方式;不是选择这些项目的最有效的方式，但我的网站实际代码更复杂，我想保持相似。谢谢!

有一种方法:

/** 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'});

我不确定上面的代码是否遵循最佳实践，但它确实有效!

相关文章：