原创方式

Question

我很困惑为什么我的下拉工作只能在一半时间内完美地完成; http://spicyyeti.com/story_archive.html我相信如果你打开预览版，下拉列表可能无法打开它的全高。虽然，有时下拉工作正常，当我离线测试时，它也可以正常工作。这有什么问题？

    <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>

下拉列表的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>

Answer 1

首先，这种设置的方式有点不同寻常。我不确定是什么导致代码执行此操作，但我在下面修改了它（

）

原创方式

（免责声明 - 这不是最好的做事方式 - 但我只是为了让你知道你的代码发生了什么。为了更好更简单的方法，请跳到下面的“更简单的方法” ！）

<script>
$(document).ready(function() {
        $('.dropdown').css('display','none')

        $('.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.data('height') }, 400, "swing");
            }
        });
    });
</script>

让我们来看看我改变了什么 -

第一行已更改，因此不会更改.dropdown的高度，而是隐藏它。 $dropdown.show()稍后会透露。

我还用更清晰的.attr('data-*') jquery函数替换了.data。他们做同样的事情，但现在你只写height而不是data-height。

重要的是要记住，您展示的内容与.dropdown的高度不同。因此，一些示例HTML可能看起来像这样 -

<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上的height: 98px属性似乎也可以部分解决问题。但不要被劝阻 - 下面有一个更好的答案，你会发现更多的可维护性。我不确定为什么你的代码正在读取实际高度，而不是你指定的data-height。它们可能被视为同一件事。

更简单的方法

I have a JSFiddle here that I will be explaining.

<强> 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>

<强> CSS

这里只有一个重要的CSS规则 - 它会隐藏你的下拉区域，而不是设置它的高度，然后不得不稍后用数据属性调用它。

.dropdown{
     display: none;
}

Javascript（评论！）

$(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.
    });
});

与您的网站合并应该非常简单。只需添加Javascript代替您拥有的Javascript，添加CSS规则，然后取出style="98px;"类上的.dropdown属性，因为该规则会给它一个不正确的高度。

如果您需要更多帮助或澄清，请告诉我们！

Answer 2

根据@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>

document.ready和window.load之间的区别是

在加载DOM时，document.ready会激活，不一定是img准备就绪。
当所有帧，对象和图像都满载时，window.load会启动。

在你的情况下，你的js应该等待加载图像的高度。尝试使用渐进式img来加快页面加载速度。

jQuery Dropdown Height Attr

2 个答案:

原创方式

更简单的方法