Question

嘿伙计们我有点问题。

我有一个id为＆＃39; #content＆＃39;另一个id为'#chat'的人。我使用jQuery通过单击链接使聊天div按指令上下滑动，但现在我想让内容div在聊天div关闭时将其宽度增加到90％。这里是css：

    #chat {
        width:20%;
        height:84.5%;
        background-color:#000;
        border:1px solid #FFF;
        float:right;
        right:0;
        bottom:0;
        margin-top:0;
        position:fixed;
        z-index:3;
    }



     #content {
            width:70%;
            height:600px;
            background-color:#FFF;
            bottom:0;
            margin-top:20px;
            float:left;
            margin-left:5%;
        }

这里是jQuery：

    $(document).ready(function () {
    $('#chat').hide();
    $('.chatToggle').click(function(){
        $('#chat').toggle('slide');
    });
});

Answer 1

试试这个，

$( "#chat" ).toggle( "slide", function() {
  if(!$("#chat").is(":visible")) {
    $("#content").css("width","90%");
  } else {
    $("#content").css("width","70%");
  }
});

Answer 2

您可以为聊天面板添加一个类，以确定它是否已打开。

$('.chatToggle').click(function () {
    if ($('#chat').hasClass("opened")) {
        $('#chat').removeClass("opened");
        $('#content').css("width", "90%");
    }
    else {
        $('#chat').addClass("opened");
        $('#content').css("width", "70%");
    }
    $('#chat').toggle('slide');
});

扩展div宽度

2 个答案: