0

在我的项目中，每当用户单击标题栏时，我都会尝试toggle通过提供以下属性以使仅出现标题栏（就像 FB Chat 一样）来调整 div 的高度。

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.

这是小提琴

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

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

4

4 回答 4

1

尝试在课堂!important上为您的身高添加声明。minimize

于 2013-01-09T05:11:16.830 回答
1

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

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

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

更新：

jsbin.com/uyanix/27

于 2013-01-09T05:15:28.747 回答
0

这是以下修复的示例：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

于 2013-01-09T05:37:06.933 回答
0

如果您想将 .toggleClass() 与 CSS 过渡一起使用，请使用 MAX-HEIGHT 并完全删除 height 属性。在您打算附加的课程上，只需将 max-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() http://codepen.io/ChadR/pen/gpvWGE的 CSS 转换的示例

于 2015-07-01T23:10:57.300 回答