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

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 高度 第一条新闻被延伸到原来的高度。

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

Answer 1

很难 100% 验证我的答案，因为我需要一个小提琴/plunker 与您的 HMTL/CSS/JS 一起使用，但这是我认为会有所帮助的建议。

不是通过 JavaScript 显式地为元素设置 CSS 样式，而是通过诸如“css(value,property)”之类的方法，而是通过“addClass()”、“removeClass()”或“向元素添加或删除类”切换类（）'。

新外观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;
}

这里的区别在于，您不是试图将“height: auto”断言为“height: something else”的压倒一切的样式，您只是在打开/关闭时添加和撤回固定高度 - 我会建议更不容易出错更可能带来您想要的行为。

此外，这也是一个在任何情况下都应遵循的好习惯，原因如下：

• 关注点分离，您的样式属于您的 CSS 文件而不是 JavaScript（即组件样式放在一起）
• 可重复使用的代码，这些反映“关闭”状态的样式可以在此 UI 组件以及其他组件的所有实例中重复使用，而不是在 JS 点击处理函数中每次都重新编写
• 通过诸如“css(property, value)”之类的 jQuery 函数修改 CSS 是个坏主意，它会导致样式添加为 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文件。如果您将该值设置为显式高度，要将其恢复为 height:auto，您必须在 javascript 中将 height:auto 写入它，或者完全删除您添加的样式元素。