使用 jQuery 同时对不同动态高度 div 的高度进行动画处理

Question

我有 6 个不同的 div，每个都有不同的高度。每个 div 都包含动态内容，因此每个 div 的高度都不同。每个 div 的初始高度使用 CSS.

设置为 32px

每个 div 包含一个 h3 标签。单击任何 h3 标签应将所有 div 设置为各自的高度。再次单击应该 return 所有 div 回到 32px 的高度。

我快搞定了。目前 div 扩展到第一个 div 的高度而不是它们自己的高度。

我做错了什么？

$('.vintage-icons h3').on('click touch',function(){

            $('.vintage-icons h3').each(function(){
            var autoheight = $('.vintage-icons h3').parent().get(0).scrollHeight;
            console.log(autoheight);
            if(!$(this).is(".open")) {
                $('.vintage-icons h3').parent().animate({'height':autoheight},750);
                $(this).addClass('open');
            }else if($(this).is(".open")) {
                $('.vintage-icons h3').parent().animate({'height':'32px'},750);
                $(this).removeClass('open');
            }
            return false;
            });
        });

<div class="vintage-icons">
    <div>
        <h3 class="open"><a href="#">TITLE1</a></h3>
        <p>Dynamic content 1</p>
    </div>
    <div>
        <h3><a href="#">TITLE2</a></h3>
        <p>Dynamic content 2 Dynamic content 2 Dynamic content 2 Dynamic content 2</p>
    </div>
    <div>
        <h3><a href="#">TITLE3</a></h3>
        <p>Dynamic content 3 Dynamic content 3 Dynamic content 3</p>
    </div>
</div>

.vintage-icons div{
    height:32px;
    overflow:hidden;
}

在此先感谢您的帮助！

Answer 1

你有这个：

var autoheight = $('.vintage-icons h3').parent().get(0).scrollHeight;

这将获取第一个 h3 的值。然后，在下面的 h3 的 each 中，您设置为相同的 autoheight。您可能可以改用它：

var autoheight = $(this).parent().get(0).scrollHeight;

在这种情况下您可以使用 $(this)，因为您已经在 h3 元素的 each 内。

Answer 2

更改为这一行：var autoheight = $(this).parent().get(0).scrollHeight;

不要return假。

然后就可以了

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
$( document ).ready(function() {
 $('.vintage-icons h3').on('click touch',function(){

            $(".vintage-icons h3").each(function(){
             var autoheight = $(this).parent().get(0).scrollHeight;
             if(!$(this).is(".open")) {
                 $(this).parent().animate({'height':autoheight},750);
                 $(this).addClass('open');
             }else if($(this).is(".open")) {
                 $(this).parent().animate({'height':'32px'},750);
                 $(this).removeClass('open');
             }
            });
        });
 });
</script>
<style>
 .vintage-icons div{
     height:32px;
     overflow:hidden;
     width: 60px;
 }
</style>
</head>
<body>
<div class="vintage-icons">
    <div>
        <h3><a href="#">TITLE1</a></h3>
        <p>Dynamic content 1</p>
    </div>
    <div>
        <h3><a href="#">TITLE2</a></h3>
        <p>Dynamic content 2 Dynamic content 2 Dynamic content 2 Dynamic content 2</p>
    </div>
    <div>
        <h3><a href="#">TITLE3</a></h3>
        <p>Dynamic content 3 Dynamic content 3 Dynamic content 3</p>
    </div>
</div>
</body>

使用 jQuery 同时对不同动态高度 div 的高度进行动画处理

Use jQuery to animate height of different dynamic height divs simultaneously

each

jquery