jQuery 无法使元素下方的内容在打开和关闭时上下移动

Question

我有这个网页...

http://grabbers.maddoggmedia.com/

当访问者单击聊天区域内的文本输入时，我希望聊天打开，它确实打开了。但是，我似乎无法弄清楚如何在打开和关闭时上下移动下面的内容。截至目前，它只是在其他内容之下。

我真的需要尽快完成这项工作，如果有任何帮助，我将不胜感激。我今天花了 6 个小时试图找到正确的答案，但无济于事。

http://jsfiddle.net/maddoggmedia/6LK4p/

 $(document).ready(function() {

 $('#chat-box-chats').hide();

 $(".chat-box-textinput").click(function(){
 $("#chat-box-chats").show();
 });

 $(".chat-box-textinput").click(function(){
 $(".chat-box-banner").show();
 });

Answer 1

在您的网站上发现了以下代码块:

    // Prepare layout options.
    var options = {
        autoResize: true,
        // This will auto-update the layout when the browser window is resized.
        container: $('#main'),
        // Optional, used for some extra CSS styling
        offset: 40,
        // Optional, the distance between grid items
        itemWidth: 264 // Optional, the width of a grid item
    };

    // Get a reference to your grid items.
    var handler = $('#tiles li');

    // Call the layout function.
    handler.wookmark(options);

所以每次更新列表时调用它..

Js:

   function updateTable() {
    var options = {
        autoResize: true,
        container: $('#main'),
        offset: 40,
        itemWidth: 264
    };
    var handler = $('#tiles li');
    handler.wookmark(options);
}
$(document).ready(function() {
    $('div[id*="chat-box-chats"]').hide();
    updateTable();

    $(".chat-box-textinput textarea").focus(function() {
        $(this).parent().parent().find("#chat-box-chats").show();
         updateTable();
    });

    $(".chat-box-textinput textarea").blur(function() {
        $(this).parent().parent().find("#chat-box-chats").hide();
         updateTable();
    });

    $(".chat-box-textinput").click(function() {
        $(".chat-box-banner").show();
    });
});

JsFiddle:DEMO | SOURCE

使用的 fiddle :http://jsfiddle.net/apAAG/

编辑:

Home.js:

 function updateTable() {
    var options = {
        autoResize: true,
        container: $('#main'),
        offset: 40,
        itemWidth: 264
    };
    var handler = $('#tiles li');
    handler.wookmark(options);
}

// bookmark stars
 $(document).ready(function() {
 $('#chat-box-chats').hide();
 $('#nav-status-offline').hide();
 $('.chat-box-banner').hide();
 // hides the slickbox as soon as the DOM is ready

 $(".chat-box-textinput").click(function(){
  $("#chat-box-chats").show();
});
 $("#nav-status").click(function(){
  $("#nav-status-offline").show();
});
 $("#nav-status").click(function(){
  $("#nav-status").hide();
});
 $("#nav-status-offline").click(function(){
  $("#nav-status-offline").hide();
});
 $("#nav-status-offline").click(function(){
  $("#nav-status").show();
});
 $(".chat-box-textinput").click(function(){
  $(".chat-box-banner").show();
});

$('span.bookmark').click( function() {
$('span.bookmark').toggleClass("pushed");
$('span.bookmark img').toggleClass("noopacity");
});

$('textarea').each(function() {
// Stores the default value for each textarea within each textarea
$.data(this, 'default', this.value);
}).focus(function() {
    // If the user has NOT edited the text clear it when they gain focus
    if (!$.data(this, 'edited')) {
        this.value = "";
    }
}).change(function() {
    // Fires on blur if the content has been changed by the user
    $.data(this, 'edited', this.value != "");
}).blur(function() {
    // Put the default text back in the textarea if its not been edited
    if (!$.data(this, 'edited')) {
        this.value = $.data(this, 'default');
    }
});
});

$(document).ready(function() {
    $('div[id*="chat-box-chats"]').hide();
    updateTable();

    $(".chat-box-textinput textarea").focus(function() {
        $(this).parent().parent().find("#chat-box-chats").show();
        $(this).parent().parent().find(".chat-box-banner").show();
        $(this).addClass("big-textarea");
         updateTable();
    });

    $(".chat-box-textinput textarea").blur(function() {
        $(this).parent().parent().find("#chat-box-chats").hide();
        $(this).parent().parent().find(".chat-box-banner").hide();
        $(this).removeClass("big-textarea");
         updateTable();
    });
});