jQuery下拉列表高度属性

我不明白为什么我的下拉菜单只有一半的时间是完美的；我相信如果你打开预览，很可能下拉列表不会打开到最大高度。虽然，有时候下拉菜单可以正常工作，当我离线测试时，它也可以正常工作。这里有什么问题

    <script>
$(document).ready(function() {
        $('.item + .dropdown').each(function () {
            $(this).attr('data-height', $(this).height()).height(0);
        });

        $('.item').click( function() {
            $dropdown = $(this).find('+ .dropdown');
            if ($(this).hasClass('open')) {
                $(this).removeClass('open');
                $dropdown.animate({ height:'0' }, 400, "swing", function () {
                    $(this).hide();
                });
            } else {
                $(this).addClass('open');
                $dropdown.show().animate({ height: $dropdown.attr('data-height') }, 400, "swing");
            }
        });
    });
</script>

$（文档）.ready（函数（）{
$（'.item+.dropdown'）。每个（函数（）{
$（this.attr（'data-height'，$（this.height（））.height（0）；
});
$（'.item'）。单击（函数（）{
$dropdown=$（this.find（'+.dropdown'）；
if（$（this）.hasClass（'open'））{
$（this.removeClass（'open'）；
$dropdown.animate（{height:'0'}，400，“swing”，函数（）{
$（this.hide（）；
});
}否则{
$（this.addClass（'open'）；
$dropdown.show（）.animate（{height:$dropdown.attr（'data-height'））400，“swing”）；
}
});
});

还有下拉列表的CSS

<style> 
            .dropdown {
        display: block;
        width: calc(80% - 100px);
        background-color: white;
        padding: 5px 5px 5px 5px;
        margin: -10px auto;
        text-align: center;
        overflow: hidden;
        }
        .dropdown h2 {
        display: inline;
        font-size: 29px;
        vertical-align: 60px;
        padding: 0 10px;
        }
        .dropdown h1 {
        font-size: 30px;
        font-family: "Lobster Two", cursive;
        }
        .dropdown img {
        max-height: 150px;
        max-width: 150px;
        border-radius: 100%;
        }
</style>

.下拉列表{
显示：块；
宽度：计算（80%-100px）；
背景色：白色；
填充物：5px 5px 5px；
保证金：-10px自动；
文本对齐：居中；
溢出：隐藏；
}
.下拉列表h2{
显示：内联；
字体大小：29px；
垂直对齐：60px；
填充：0 10px；
}
.下拉列表h1{
字体大小：30px；
字体家族：“龙虾二”，草书；
}
.下拉式img{
最大高度：150像素；
最大宽度：150px；
边界半径：100%；
}

根据@Alexander Lozada的回答，试试这个

<script>
    $(window).load(function() {
         $('.item + .dropdown').each(function () {
                $(this).attr('data-height', $(this).height()).height(0);
            });

         $('.item').click( function() {
            $dropdown = $(this).find('+ .dropdown');
            if ($(this).hasClass('open')) {
                $(this).removeClass('open');
                $dropdown.animate({ height:'0' }, 400, "swing", function () {
                    $(this).hide();
                });
            } else {
                $(this).addClass('open');
                $dropdown.show().animate({ height: $dropdown.attr('data-height') }, 400, "swing");
            }
        });
    });
</script>

$（窗口）。加载（函数（）{
$（'.item+.dropdown'）。每个（函数（）{
$（this.attr（'data-height'，$（this.height（））.height（0）；
});
$（'.item'）。单击（函数（）{
$dropdown=$（this.find（'+.dropdown'）；
if（$（this）.hasClass（'open'））{
$（this.removeClass（'open'）；
$dropdown.animate（{height:'0'}，400，“swing”，函数（）{
$（this.hide（）；
});
}否则{
$（this.addClass（'open'）；
$dropdown.show（）.animate（{height:$dropdown.attr（'data-height'））400，“swing”）；
}
});
});

document.ready和window.load之间的差异为

• document.ready在加载DOM时启动，不一定是img已就绪

• 当所有帧、对象和图像都已完全加载时，window.load将激发

在您的情况下，您的js应该等待加载的图像的高度。

---

尝试渐进式img以加快页面加载速度

首先，这种设置方式有点不合常规。我不确定是什么原因导致代码这样做，但我在下面（稍微）修复了它：

原始方式 （免责声明-这并不是最好的方法-但我之所以包括它，只是为了让您知道代码发生了什么。要获得更好、更简单的方法，请跳到下面的“更简单的方法”！）

这是一个非常简单的例子，在没有数据属性的情况下更容易处理

奖金编辑：我忽略了这一点，哎呀

嗯-简单地删除div上的

height:98px

属性似乎也能部分解决问题。但是不要被劝阻——下面有一个更好的答案，你会发现它更易于维护。我不知道为什么您的代码读取的是实际高度，而不是您指定的

数据高度

。它们可能被解读为同一事物

---

更简单的方法

HTML 这里的HTML是相当标准的，与您的设置类似。有两个相同的类在工作-

.item

，这会触发打开

.dropdown

。这是一个简单的示例，但是可以很容易地应用于您已经拥有的页面

<div class="item">
    Click me!
</div>
<div class="dropdown">
    content!<br>
    content!<br>
    content!<br>
    content!<br>
</div>
<div class="item">
    Click me!
</div>
<div class="dropdown">
    content!<br>
    content!<br>

</div>
<div class="item">
    Click me!
</div>
<div class="dropdown">
    content!<br>
    content!<br>
    content!<br>
</div>

Javascript（注释！）

这应该是相当简单的合并与您的网站。只需添加Javascript来代替现有的Javascript，添加CSS规则，并去掉

下拉列表中的
属性，因为该规则给出的高度不正确

如果您需要更多帮助或澄清，请告诉我
 快速提问-您是否为图像或其父div设置了设置的高度？我还没有深入研究代码，但这个问题可能是由于插件试图在图像完全加载之前获取高度造成的。只是尝试了一个站点的本地副本-看起来图像高度不是问题所在。我在想也许jQuery中的某些东西已经关闭了。编辑：“数据高度”似乎有问题。它没有访问它。当使用静态值时，它会正常工作。@AlexanderLozada在dom就绪时设置数据高度。但当dom就绪时，数据高度不正确。它应该设置在.dropdown中的元素之后。因此，我认为使用window.load可以解决这个问题。我在3G互联网连接下的本地副本上测试了这段代码，效果很好。所以它在你这边也应该可以正常工作。嗯，我得再看一眼。（窗口）。加载确实解决了这个问题。代码似乎没有关闭，但jQuery没有读取图像高度。显然是（窗口）。与（文档）相比加载。就绪允许最初加载图像。。。
<div class="dropdown" data-height="240" style="height: 98px;">
            <h1><a href="http://spicyyeti.com/maniacs1.html">FIRST</a>•<a href="http://spicyyeti.com/m/maniacs15.html">LAST</a></h1>
        </div>

<div class="item">
    Click me!
</div>
<div class="dropdown">
    content!<br>
    content!<br>
    content!<br>
    content!<br>
</div>
<div class="item">
    Click me!
</div>
<div class="dropdown">
    content!<br>
    content!<br>

</div>
<div class="item">
    Click me!
</div>
<div class="dropdown">
    content!<br>
    content!<br>
    content!<br>
</div>

.dropdown{
     display: none;
}

$(function(){ 
    $('.item').click(function(){
        $('.toggled').slideUp();
        //will take anything with the class "toggled" and slide it up!  Take out this line if you want multiple areas to be able to be expanded at once
        $(this).next('.dropdown').slideToggle().addClass('toggled');
        //this will take the ".item" and find the next div with the class of "dropdown" and slideToggle it.  It also adds the class "toggled" to be used with the previous line.
    });
});