Question

请仔细阅读以下图片
https://dl.dropboxusercontent.com/u/36614618/Doubts/onlineChatImg.jpg
在上面的图像'Image 01'中，您可以在html文档的右侧找到onlineChat div。当我将鼠标悬停在在线聊天div上时，我们可以找到搜索输入并隐藏在线聊天按钮'|＆gt;'在线聊天的底部。请通过上面的图片'Image 02'。现在，当我点击隐藏按钮'|＆gt;'时，在线聊天div正在隐藏'图像03'。一旦onlinechat div被隐藏，另一个图标就会显示出来，再次显示在线聊天'|＆lt;'。直到现在它的工作正常但问题是，当我调整窗口大小时，Onlinechat Div会自动显示。我正在寻找的是当窗口调整大小时，如果隐藏了在线聊天，那么它应该被隐藏（不应该显示）。
以上概念与Facebook在线聊天有点相同

$('#onlineFriendsSearchShow').hide();// Default Search input is hide.

$('#OnlineChathideShowIcon').on('click',function(){ //When clicked on '|>' button, onlineChat div hide and left part div gets width of 100%.
    $('#rapMusicSocialNetworkRightPart').hide();//onlineChat div getting hide.
    $('#rapMusicSocialNetworkLeftPartWrapper').css('width','100%'); //Left part gets width of 100%.
    $('#onlineFriendsSearchShow').show();//show button '|<' gets displayed.
});

$('#onlineFriendsSearchShow').bind('click',function(){ //When clicked on '|<' show button. (to get right onlineChat div back).
    $(this).hide();//'|<' button hide.
    $('#onlineFriendsSearch').show();//search input show.
    $('#rapMusicSocialNetworkRightPart').show();//onlineChat div show.

    var widthRap = $(window).width()-201;//created variable having mainWindow width - onlineChat Div width.
    $('#rapMusicSocialNetworkLeftPartWrapper').css('width',widthRap);//variable value assigning to left part, so left and right divs get's adjusted within document.
});

Answer 1

你需要做一些刷新：

$(window).resize(function() {
    var widthRap = $(window).width()-201;//created variable having mainWindow width - onlineChat Div width.
    $('#rapMusicSocialNetworkLeftPartWrapper').css('width',widthRap);//variable value assigning to left part, so left and right divs get's adjusted within document.
});

使用jquery调整窗口大小问题

1 个答案: