0

我试图在位于屏幕底部的 facebook 风格的栏中构建一个即时通讯工具，经过多次尝试，我有了一个基本的设置，但我坚持如何解决这个问题。我希望我的问题足够具体。想想我试图以简单形式复制的 Facebook IM。

我的代码有 2 个相关问题，1 个问题：

  1. 如果你点击绿色的朋友 div 它向下扩展，如何使它向上扩展？

  2. 当您单击任何朋友时，将额外的 div 附加到#container 的好方法是什么？

    问题：。我可以使用像 jquery UI 这样的组件，还是有一些很好的例子可以借鉴和学习？我相对 jquery 新手，并尝试了几个小时来找到如何做到这一点:(

的HTML：

<div id="container">
  <div id="friends">
    Friends: (2) Online
      <ul>
          <li id="person">Doutzen</li>
          <li id="person">Alexandra</li>
      </ul>
  </div>
    container, new chat boxes appear here
</div>

的CSS：

body {
    padding-top: 400px;
}

#container {
    background-color: grey;
    width: 100%;
    height: 30px;
}

#friends {
    position: relative;
    height: 10px;
    color: white;
    width: 150px;
    background-color: green;
    padding: 10px;
    float: right;
    overflow: hidden;
}

#friends ul li {
    padding: 10px;
    margin: 10px;
    background-color: darkgreen;
}
​

jQuery：

$('#friends').toggle(function(){
    $(this).animate({'height': '100px'}, 10);
}, function(){
    $(this).animate({'height': '10px'}, 10);
});

$(".person").click(function () {
      $('#container').append("<div class='chat'>chat with ...</div>");
});

工作示例：http: //jsfiddle.net/qJCmF/5/

4

1 回答 1

1

1) 对于向上和向下扩展，看一下Slide jQuery UI 效果。您可以将其与 和 结合使用$('#my-element').show('slide');，$('#my-element').hide('slide');如图所示。此外，您还可以以同样的方式使用许多其他效果，这些效果可能更符合您的需求；您甚至可以提供额外的参数来控制效果呈现的方式。

2) 要将额外的 DOM 元素附加到您的容器，您可以继续调用append()或prepend()jQuery 函数，它们会继续将您的元素添加到容器子元素的末尾或开头。

于 2012-10-04T11:20:25.857 回答