JQuery css max-height无效

I've tested this code for set .css('max-height','auto') css property in JQuery but it's not working, and when I set a dimension like .css('max-height','93px') it's working fine, how can I set it as auto ?

我已经在JQuery中为set .css('max-height','auto')css属性测试了这段代码,但是它没有用,当我设置像.css这样的维度时('max-height','93px')它工作正常,我怎么能把它设置为自动?

HTML:

<div class="holder">
    <div>DIVISION</div>
    <div>DIVISION</div>
    <div>DIVISION</div>
    <div>DIVISION</div>
    <div>DIVISION</div>
    <div>DIVISION</div>
    <div>DIVISION</div>
</div>
<br />
<input type="button" onclick="test();" value="CHECK" />

CSS:

.holder{
    max-height:40px;
    background:red;
    padding:10px;
    overflow:hidden;
}
.holder div{
    background:blue;
    margin:3px 0;
}

js:

function test(){
    var hldr=$('.holder'); //get element

    alert('before set: ' + $('.holder').css('max-height')); //alert before set

    /* SET */
    hldr.css('max-height','auto');

    alert('after set: ' + $('.holder').css('max-height'));//alert after set
}

http://jsfiddle.net/silverlight/23UCV/2/

3 个解决方案

#1

Changing max-height to height fixes your problem.

将max-height更改为高度可以解决您的问题。

Demo

#2

I have also faced the same problem.

我也面临同样的问题。

I have tried the maxHeight property. Now the problem has been resolved

我试过了maxHeight属性。现在问题已经解决了

$('#exampleId').css({"maxHeight":"100px"});

#3

Not sure if earlier browsers had this issue. Tested recently in Chrome 56.x, FF 51.0.x and IE 11, you can use:

不确定早期的浏览器是否有此问题。最近在Chrome 56.x,FF 51.0.x和IE 11中测试过,您可以使用:

max-height: none;

so this works

这样可行

alert('after set: ' + $('.holder').css('max-height','none'));//alert after set

One can use this as well with jquery (tested with 2.0.3) and create a toggle

也可以使用它和jquery(用2.0.3测试)并创建一个切换

$('#someid').toggleClass("expand");

and css

.expand{
   max-height: none !important;
}

#1