Question

我遇到了一个问题。我正在尝试展开并在单击时缩回#inner的高度。当我这样做时，我希望#container的高度也增加，但没有指定增加，就像我使用#inner（+ = 65px）。但是，＃container不会像我认为设置为'auto'时那样自动扩展。有人可以帮我解决这个问题。非常感谢，提前谢谢。

HTML：

<div id=‘container’>
    <div id=‘inner’>This is the inner div</div>
</div>

Jquery的：

 function handler1() {
     $(this).css('height', '+=65px');
     $(this).one("click", handler2);
 }

 function handler2() {
     $(this).css('height', ' -= 65px ');
     $(this).one("click", handler1);
 }

 $("#inner").one("click", handler1);

CSS：

#container {
    display: block;
    width: 200px;
    height: auto;
}
#inner {
    height: auto;
}

Answer 1

您可以大量简化此代码。我坚持通过jQuery添加css，因为你是如何做到这一点但这只会更好地使用类。还添加了颜色，以便您可以看到更改。我们可以使用单个处理程序来跟踪带有类的div的状态，而不是添加使用one不断添加和删除事件的开销。

HTML：

<div id="container">
    <div id="inner">This is the inner div</div>
</div>

JS：

 function handler1 () {
     var inner = $("#inner");
     if (!inner.hasClass('added')) {
        inner.css('height', '+=65px').addClass('added');
     }
     else {
        inner.css('height', '-=65px').removeClass('added');
     }
 }

 $("#inner").on("click", handler1);

CSS：

#container {
    width: 200px;
    background: red;
}

#inner {
    background: yellow;
}

小提琴：http://jsfiddle.net/4pv6y6as/

Answer 2

对我来说是外部容器（#container）。确实扩大了。您的代码中的问题是您混合

'with'

和

“with”

喜欢这里：

$(this).css('height', ‘ -= 65px ');

或在这里：

$(“#inner").one("click", handler1);

所以它的语法问题......

此外，您应该使用“而不是'

来声明html中的类

并且永远不要像有时候那样使用圆角撇号：）

还制作了fiddle

问候timotheus

自动扩展div

2 个答案: