Question

我对聊天框有疑问

我有这个脚本

$(function(){

$(".sidebar-name").click(function(){
var userid = $(this).attr('id');
$(".chatbox[id="+userid+"]").show();
$(".chattexts").animate({ scrollTop: 200 }, 50);
return false;
});

$(".closechat").click(function(){
var userid = $(this).attr('id');
$(".chatbox[id="+userid+"]").hide();
return false;
});

});

*{padding: 0; margin: 0; outline: 0;}
body {
	font-family: tahoma;
	font-size: 14px;
}

/*chat menu*/
.chat-sidebar {
	width: 200px;
	position: fixed;
	height: 100%;
	right: 0px;
	top: 0px;
	padding-top: 10px;
	padding-bottom: 10px;
	border: 1px solid #000;
	background: #333;
	color: #fff;
}
.sidebar-name {
	padding: 10px;
	border-top: solid 1px #222;
	border-bottom: solid 1px #444;
	cursor: pointer;
}
.sidebar-name:first-child {
	border-top: 0px;
}
.sidebar-name:last-child {
	border-bottom: 0px;
}
/*chat menu*/


/*chat box*/
.chatbox {
	border: solid 1px #333;
	width: 250px;
	bottom: 0;
	z-index: 9;
	position: fixed;
	right: 210px;
	margin-right: 10px;
	background: #fff;
	display: none;
}
.hedchatbox {
	background: #555;
	color: #fff;
	border-bottom: solid 1px #333;
	padding: 5px;
}
.hedchatbox .closechat {
	float: right;
	cursor: pointer;
}
.chattexts {
	height: 200px;
	border: solid 1px #444;
	margin: 5px;
	overflow-y: scroll;
}
.chattexts .prfromme {
	background: #ccc;
	padding: 2px;
	text-align: center;
}
.chattexts .forpr {
	background: #f0f0f0;
	padding: 2px;
	text-align: center;
}
.textareachat {
	padding: 5px;
	padding-top: 0px;
}
.textareachat .texttypechat {
	border: solid 1px #ccc;
	resize: none;
	width: 190px;
	padding: 3px;
	font-family: tahoma;
	font-size: 12px;
}
/*end chat box*/

<html>
<head>
	<meta charset="utf-8">
	<title>title</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>

<div class="chat-sidebar">
<div id="1" class="sidebar-name">mahmoud samy</div>
<div id="2" class="sidebar-name">samy ahmed</div>
<div id="3" class="sidebar-name">mohamed ahmed</div>
<div id="4" class="sidebar-name">medo medo</div>
</div>



<div class="chatbox" id="1">
<div class="hedchatbox"> <i class="fa fa-user"></i> mahmoud samy 
	<div class="closechat" id="1">close</div>
</div>
<div class="chattexts">
<p class="prfromme">hi, how are you?</p>
<p class="forpr">i'm fine</p>
<p class="forpr">what about you?</p>
<p class="prfromme">i'm good</p>
<p class="prfromme">hi, how are you?</p>
<p class="forpr">i'm fine</p>
<p class="forpr">what about you?</p>
<p class="prfromme">i'm good</p>
<p class="prfromme">hi, how are you?</p>
<p class="forpr">i'm fine</p>
<p class="forpr">what about you?</p>
<p class="prfromme">i'm good</p>
</div>
<div class="textareachat"><textarea class="texttypechat" placeholder="type your message"></textarea></div>
</div>

<div class="chatbox" id="2">
<div class="hedchatbox"> <i class="fa fa-user"></i> samy ahmed
	<div class="closechat" id="2">close</div>
</div>
<div class="chattexts">
<p class="prfromme">hi, how are you?</p>
<p class="forpr">i'm fine</p>
<p class="forpr">what about you?</p>
<p class="prfromme">i'm good</p>
<p class="prfromme">hi, how are you?</p>
<p class="forpr">i'm fine</p>
<p class="forpr">what about you?</p>
<p class="prfromme">i'm good</p>
<p class="prfromme">hi, how are you?</p>
<p class="forpr">i'm fine</p>
<p class="forpr">what about you?</p>
<p class="prfromme">i'm good</p>
</div>
<div class="textareachat"><textarea class="texttypechat" placeholder="type your message"></textarea></div>
</div>

<div class="chatbox" id="3">
<div class="hedchatbox"> <i class="fa fa-user"></i> mohamed ahmed
	<div class="closechat" id="3">close</div>
</div>
<div class="chattexts">
<p class="prfromme">hi, how are you?</p>
<p class="forpr">i'm fine</p>
<p class="forpr">what about you?</p>
<p class="prfromme">i'm good</p>
<p class="prfromme">hi, how are you?</p>
<p class="forpr">i'm fine</p>
<p class="forpr">what about you?</p>
<p class="prfromme">i'm good</p>
<p class="prfromme">hi, how are you?</p>
<p class="forpr">i'm fine</p>
<p class="forpr">what about you?</p>
<p class="prfromme">i'm good</p>
</div>
<div class="textareachat"><textarea class="texttypechat" placeholder="type your message"></textarea></div>
</div>

<div class="chatbox" id="4">
<div class="hedchatbox"> medo medo
	<div class="closechat" id="4">close</div>
</div>
<div class="chattexts">
<p class="prfromme">hi, how are you?</p>
<p class="forpr">i'm fine</p>
<p class="forpr">what about you?</p>
<p class="prfromme">i'm good</p>
<p class="prfromme">hi, how are you?</p>
<p class="forpr">i'm fine</p>
<p class="forpr">what about you?</p>
<p class="prfromme">i'm good</p>
<p class="prfromme">hi, how are you?</p>
<p class="forpr">i'm fine</p>
<p class="forpr">what about you?</p>
<p class="prfromme">i'm good</p>
</div>
<div class="textareachat"><textarea class="texttypechat" placeholder="type your message"></textarea></div>
</div>

</body>
</html>

当我点击任何用户时，他的聊天框会显示，但如果我点击其他用户，它也显示在旧聊天框中我想让对方旁边的聊天框可以帮助我吗？

并感谢所有

如何在彼此旁边制作聊天框

0 个答案: