0

私のプロジェクトではtoggle、タイトルバーのみが表示されるように次のプロパティを指定することで、ユーザーがタイトルバーをクリックするたびに div の高さにしようとしています (FB チャットのように)。

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特定のブラウザのみを対象としており、よりハックであるため、上記の提案どおりには使用しません。よりクリーンなアプローチになる可能性があるため、私の提案を試してください。

更新：

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

CSS トランジションで .toggleClass() を使用する場合は、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() http://codepen.io/ChadR/pen/gpvWGEで CSS トランジションを利用する例を次に示します。

于 2015-07-01T23:10:57.300 に答える