javascript - 无法在特定的 div 中打印输出？

Question

首先，我不是很擅长设计，但在一些帮助下我能够实现这段代码

我的主要问题是，当用户打开一个 div 时，它会变成目标 div，所以如果我同时打开五个 div，我输入哪个都没有关系，因为文本会附加到最后打开的 div .我还可以打开无限量的相同 div，这是不应该发生的。

我遇到的一个小问题是我无法关闭 div 并将其最小化(很像当我们单击聊天框时 fb 会最小化)。 Fiddle

HTML

<div id="contact">
    <header>Users</header>
    <main>
        <ul>
            <li id="Prashant"><a href="#">Prashant</a></li>
            <li id="Katrina"><a href="#">Katrina</a></li>
            <li id="Priyanka"><a href="#">Priyanka</a></li>
            <li id="Kareena"><a href="#">Kareena</a></li>
            <li id="Anushka"><a href="#">Anushka</a></li>
        </ul>
    </main>
</div>
<div id="chat"></div>

CSS

* {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
body{margin:0;padding:0;}
#contact {
    height: auto;
    background: #ececec;
    position:absolute;
    right:0;
    bottom:0;
    width:100px;
}
#contact header {
    padding: 10px;
    background: #333;
    color: #FFF;
}
#contact main {
    padding: 10px
}
#chat {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 100px;
    height: auto;
}
#chat .user {
    border: 1px solid #333;
    background: #fff;
    width: 200px;
    height: 100%;
    float: left;
    margin-right: 5px;
}
.user header {
    position: relative;
    background: #4b67a8;
    border: 1px solid #2e4588;
}
.user header .status {
    position: absolute;
    top: 36%;
    left: 10px;
    width: 8px;
    height: 8px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: green;
}
.user header .header-text {
    color: #fff;
    font-weight: bold;
    padding: 8px;
    margin: 0 0 0 15px;
    font-size: 12px;
    text-shadow: 0 -1px rgba(0, 0, 0, .25);
}
.user header .close {
    position: absolute;
    right: 5px;
    top: 7px;
    color: #fff;
}
.message-area {
    background: #fff;
    height: 120px;
    padding: 5px;
    color: #333;
    overflow: scroll;
}
.user .input-area {
    border-top: 1px solid #333;
    padding: 3px;
}
.user .input-area input {
    padding: 5px;
    width: 100%;
    font-size: 12px;
    border: none;
    outline: none;
}

Javascript

var username = 'user201';
$(document).ready(function() {
    $('a').click(function(e) {
        e.preventDefault();
        var targetUser = ($(this).html());
        $(document).data('chat.targetUser', targetUser);
        var user = '<div class="user open" id="' + targetUser + '"><header><div class="status"></div><div class="header-text">' + targetUser + '</div><div class="close">&times;</div></header><div class="message-area"></div><div class="input-area"><input type="text" id="input" /></div></div>';
        $('#chat').append(user);
    });

    $('#chat').on('keydown', '#input', function(event) {
        if (event.keyCode == 13) {
            var targetUser = $(document).data('chat.targetUser');
            var txt = $(this).val();
            $('#' + targetUser + ' .message-area').append(username + ': ' + txt + '<br/>');
            $(this).val('');
        }
    });
});   

Answer 1

我编辑了 div.close 并添加了一个 div.mini 之类的

<div class="mini" title="MINIMIZE">-</div>
<div class="close" title="CLOSE">&times;</div>

.mini 的 Css

.user header .mini { 
  position: absolute;
  right: 25px;
  top: 7px;
  color: #fff;
  cursor:pointer;
}

让他们工作的 JS 代码

$(document).on("click", "div.close", function(){
  $(this).parent().parent().remove();
});

$(document).on("click", "div.mini", function(){
  var elem = $(this).parent().parent().children().not("header");
  elem.slideToggle();
});

还添加了此 js 代码以防止在已打开的情况下添加 div 并使其附加到聊天的最后一部分

if ($("div#" + targetUser).length > 0) {
   $("div#" + targetUser).appendTo("#chat");
   return false;
}

FIDDLE

编辑

为 -/+ 最小化/最大化编辑了 div.mini click 函数

$(document).on("click", "div.mini", function(){
  var elem = $(this).parent().parent().children().not("header");
  elem.slideToggle();
  $(this).text($(this).text() == "-" ? "+" : "-");
  $(this).attr("title", $(this).attr("title") == "MINIMIZE" ? "MAXIMIZE" : "MINIMIZE");   
});

UPDATED FIDDLE