Question

我有6个不同的div，每个div都有不同的高度。每个div包含动态内容，因此每个div的高度不同。使用CSS将每个div的初始高度设置为32px。

每个div都包含一个h3标记。单击任何h3标签应该将所有div设置为自己的高度。再次单击应将所有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 = $(this).parent().get(0).scrollHeight;

不要返回false。

然后它会起作用。

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

Answer 2

你有这个：

<td>  <table> <tr> <td>nested one</td> <td>nested two</td> </tr> </table> </td>

这将获得第一个var autoheight = $('.vintage-icons h3').parent().get(0).scrollHeight;的值。然后，在以下h3的{{1}}中，您设置为相同的each。你可能会改用它：

h3

在这种情况下，您可以使用autoheight，因为您已经在var autoheight = $(this).parent().get(0).scrollHeight;元素的$(this)内。

使用jQuery同时动画不同动态高度div的高度

2 个答案: