我在我的页面上列出了很多用户，我使用php函数传递用户的id，并返回一个div弹出窗口，显示他们的在线状态、头像、统计信息等。问题是，代码当前设置为显示层onmouseover和隐藏层onmouse out。我希望代码是onclick-show，第二次点击（在同一个链接上切换或点击页面上的任何其他地方）隐藏层，但我不知道如何做到这一点。
我使用的当前代码来自Dynamic Drive。（很抱歉，我的制表键在此文本框中不起作用，不确定如何修复。请随意编辑）
滑到底
原始方法：
Javascript部分
<div id="dhtmltooltip"></div>
<script type="text/javascript">
/***********************************************
* Cool DHTML tooltip script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
var offsetxpoint=-60 //Customize x offset of tooltip
var offsetypoint=20 //Customize y offset of tooltip
var ie=document.all
var ns6=document.getElementById && !document.all
var enabletip=false
if (ie||ns6)
var tipobj=document.all? document.all["dhtmltooltip"] : document.getElementById? document.getElementById("dhtmltooltip") : ""
function ietruebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function ddrivetip(thetext, thecolor, thewidth){
if (ns6||ie){
if (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"
if (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor
tipobj.innerHTML=thetext
enabletip=true
return false
}
}
function positiontip(e){
if (enabletip){
var curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;
//Find out how close the mouse is to the corner of the window
var rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetxpoint-20
var bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20
var leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000
//if the horizontal distance isn't enough to accomodate the width of the context menu
if (rightedge<tipobj.offsetWidth)
//move the horizontal position of the menu to the left by it's width
tipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"
else if (curX<leftedge)
tipobj.style.left="5px"
else
//position the horizontal position of the menu where the mouse is positioned
tipobj.style.left=curX+offsetxpoint+"px"
//same concept with the vertical position
if (bottomedge<tipobj.offsetHeight)
tipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"
else
tipobj.style.top=curY+offsetypoint+"px"
tipobj.style.visibility="visible"
}
}
function hideddrivetip(){
if (ns6||ie){
enabletip=false
tipobj.style.visibility="hidden"
tipobj.style.left="-1000px"
tipobj.style.backgroundColor=''
tipobj.style.width=''
}
}
document.onmousemove=positiontip
</script>
PHP部分
$username = "<a onMouseover='"ddrivetip('<Center><font class=f2>$username</font><BR>$avatarl</center>
<table align=center><Tr><Td><b>Points:</b> <font class=alttext>$user_points</font>
<BR><B>Posts:</b> <font class=alttext>$user_posts</font><BR>$user_status</td></tr></table>
<BR><img src=$icons/add-user.png height=12> <a href=$cs_url/friends/add/$user>Send Friend Request</a>
<BR><img src=$icons/user_message2.png height=12> <a href=$cs_url/messages/compose/$user>Send Message</a>
<BR><img src=$icons/user_im2.png height=12> Instant Message')'"
onMouseout='"hideddrivetip()'">$username</a>";
我想要切换/模糊而不是mouseout的主要原因是为了让用户有机会真正点击div层内部的链接。
与我发现的其他脚本相比，我之所以坚持使用这个脚本，是因为它不依赖于唯一的id或大量的css样式。对于其他脚本，当我单击一个用户名时，它们会弹出页面上所有隐藏的div，或者至少是该用户的所有div。这似乎是最好的一次只显示一个。
我决定放弃上面的方法。我在其他地方也有一个脚本，我用它来切换类似twitter的登录。我想知道如何使用它来切换用户信息层
第二种方法：
Javascript
$(".users").click(function(e) {
e.preventDefault();
$("fieldset#users_menu").toggle();
$(".users").toggleClass("menu-open");
});
$("fieldset#users_menu").mouseup(function() {
return false
});
$(document).mouseup(function(e) {
if($(e.target).parent("a.users").length==0) {
$(".users").removeClass("menu-open");
$("fieldset#users_menu").hide();
}
});
PHP部分
<div id='container' class='users_container'>
<div id='usersnav' class='usersnav'> <a href='<?php echo $cs_url; ?>/users/all' class='users'><span>Fans</span></a> </div>
<fieldset id='users_menu'>
content
</fieldset>
</div>
正如我之前提到的，这种方法的问题是，当我单击用户名链接时，所有用户的所有层都会显示在页面上。如何使其仅显示父链接的子层？此外，当点击页面上的其他位置时，是否有方法切换隐藏的层？
从你的旧代码开始，我假设你有这样的东西：
elem.onmouseover = showCard;
elem.onmouseout = hideCard;
好吧，从那里开始，你只需要做一些事情：
elem.isShown = false;
elem.onclick = function() {
if( elem.isShown) hideCard();
else showCard();
elem.isShown = !elem.isShown;
}
这最终成为了最好的解决方案，尽管我仍然希望它有所不同
这是建立在丹的回应之上的。在Dan之前，它之所以不起作用，是因为用户信息在标签内，我将用户名切换到跨度和内容显示。之后的问题是，当我点击一个用户名时，图层会弹出，但它会一直保留，直到我再次点击同一个链接。因此，有时会同时打开多个图层。
当用户单击图层、图层外部或原始链接时，以下操作将关闭图层。一个小问题是，当点击原始链接关闭图层时，必须点击两次。
Javascript
<script type="text/javascript">
$(document).ready(function () {
$(".username").click(function () {
$(this).children().toggle();
$('.tooltip_container').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$(".username").click(function () {
$(this).children().toggle();
});
});
$("body").mouseup(function(){
if(! mouse_is_inside) $('.tooltip_container').hide();
});
});
</script>
PHP
<span class='username'>$username
<div class='tooltip_container'>
<div class='tooltip'>
Content goes here
</div>
</div>
</span>