Question

我有这段代码：

$(document).ready(function(){
    /* SET VAR FOR IS OPEN */
    var isopen = 0;

    /* SHOW FIRST NEWS ON STARTUP EXTENDED */
    /* SET ALL .TRIGGER PARENT .CONTAINER TO FIXED HEIGHT WITH CUTTED CONTENT (OVERFLOW) */ 
    $('.trigger:not(:first)').css({
            height: "70",
            overflow: "hidden"
            }, 200 );

    /* CLOSE THE CLICKED ELEMENT */
    $('.trigger').click(function() {

        if (isopen == 0) {
            // SET ALL TRIGGER TO 70PX HEIGHT 
            $('.trigger').css({overflow: "hidden"}).animate({
                height: "70",
                }, 200 );
            $(this).animate({
                    height: "350",
                    }, 200 );
        } else {
            alert('this Alert shuld show up if isopen=1');
        }
    });
})

它是网站的新闻内容。用户看到三个div。 2切割到70px高度第一个消息延伸到原来的高度。

点击高度后：自动;不起作用。所以高度设置为350px。如何获得动态高度？谢谢！

Answer 1

很难100％验证我的答案，因为我需要一个小提琴/弹药与你的HMTL / CSS / JS一起工作，但这是我的建议，我认为会有所帮助。

而不是通过JavaScript通过'css（value，property）'等方法向元素显式设置CSS样式，而是通过'addClass（）'，'removeClass（）'或'向元素添加或删除类toggleClass（）”

新面貌JS：

$('.trigger').click(function() {
    $(this).toggleClass('is-closed');
}

新面貌CSS：

.trigger {
    // Your current UI component styling, but no height specified
}
.trigger.is-closed {
    height: 70px;
    overflow: hidden;
}

这里的区别在于，你不是试图断言“高度：自动”作为“高度：别的东西”的首要风格，你只是在打开/关闭时添加和撤销固定高度 - 我建议更容易出错，更有可能带来你想要的行为。

此外，由于以下原因，这也是一个很好的做法：

关注点分离，您的样式属于CSS文件而不是JavaScript（即组件样式全部在一起）
可重复使用的代码，反映“关闭”状态的这些样式可以在此UI组件的所有实例以及其他组件中重复使用，而不是每次在JS单击处理函数中重写
通过jQuery函数修改CSS，例如'css（property，value）'是一个坏主意，它导致样式在DOM中添加为内联样式（例如style =“height：70px;”），这将需要优先于其他CSS，使得管理CSS更加困难，调试演示错误更加困难

此方法还具有减少长度和显着澄清JavaScript代码的额外好处。

高度动画

上述代码不会提供您当前拥有的高度动画。

这里的解决方案是采用CSS过渡方法而不是通过JavaScript进行动画制作。文章：http://www.w3schools.com/css/css3_transitions.asp

这将再次意味着所有与组件相关的样式将在一个位置保持在一起，但CSS动画也比JavaScript动画执行得更快/渲染更快。

希望这有帮助。

Answer 2

在javascript中设置css高度基本上是为它添加元素样式标记，由于css的渲染规则，它将覆盖css文件。如果将值设置为显式高度，要将其恢复为高度：auto，您必须在javascript中写入height：auto或者删除完全添加的样式元素。

如何在切换的div上再次单击时获得动态高度

2 个答案: