Question

在我的项目中，每当用户点击标题栏时，我都会尝试toggle div的高度，通过提供以下属性，只显示标题栏（就像FB Chat一样）。

CSS

.minimize{min-height:10px;max-height:50px;height:auto;}

的jQuery

$('#chat-outline').toggleClass('minimize');

但我认为由于该div已经存在的CSS属性，因此没有分配jQuery。

#chat-outline
{
    background-color: gray;
    width: 16%;
    height: 45%;
    min-height: 300px;
    min-width: 200px;
    max-height: 450px;
    max-width: 300px;
    position: fixed;
    bottom: 20px;
    right: 10px;
    padding: 2px;
}

jQuery函数适用于所有属性（显示，背景颜色，颜色，边框）但不能只分配height。

以下是 fiddle

编辑：在Sam3k解决方案的帮助下，我非常接近结果

http://jsbin.com/uyanix/19/edit

Answer 1

尝试在!important课程中向您的身高添加minimize声明。

Answer 2

#chat-outline，它可能优先于.minimize。如果不支持像IE6这样的旧浏览器，你可能会这样做：

#chat-outline.minimize{min-height:10px;max-height:50px;height:auto;}

我不会像上面建议的那样使用!important因为它只针对某些浏览器，而且更加黑客。试试我的建议，因为它可能是一种更清洁的方法。

<强>更新：

jsbin.com/uyanix/27

Answer 3

以下是以下修复示例：http://jsbin.com/uyanix/14

您创建的切换按预期切换了类，但是这里可以确保标题栏的高度，并提供更明确的方法在小尺寸和大尺寸之间切换

CSS更改

将标题设为固定高度，然后在最小高度和最高高度之间切换。

 #chat-title
    {
        height: 20px;
        width: 100%;
        background-color: #4B6C9E;
    }

    #chat-outline.minimize{height:5px;}    
    #chat-outline.maximize{height:100%;}



#chat-outline
{
    background-color: gray;
    width: 16%;
    height: 45%;

    min-height: 25px;  
    min-width: 200px;
    max-height: 450px;
    max-width: 300px;

    position: fixed;
    bottom: 20px;
    right: 10px;
    padding: 2px;
}

使用Jquery

为切换2类添加最大高度

$('#chat-title-name').on('click', function () {
               $('#chat-outline').toggleClass('minimize');
                 $('#chat-outline').toggleClass('maximize'); 

    });

将DOM div初始化为最大化，这将在以后取消最大化

<div id="chat-outline" class='maximize'>

这是一个例子： http://jsbin.com/uyanix/14

Answer 4

如果要将.toggleClass（）与CSS转换一起使用，请使用MAX-HEIGHT并完全删除height属性。在你想要追加的课程中，只需将最大高度设置为你知道你永远不会达到的高度。通过这样做，容器高度将由内容控制（在某种程度上是动态的）。

.container {
    display: block;
    background: #ff0000;
    max-height: 40px;
    -moz-transition: max-height 500ms ease-in-out;
    -webkit-transition: max-height 500ms ease-in-out;
    transition: max-height 500ms ease-in-out;
}

.appended-for-height {
    max-height: 600px;
}

这是一个利用.toggleClass（）的CSS转换的例子 http://codepen.io/ChadR/pen/gpvWGE

切换高度类

4 个答案: