Question

我在我的页面上列出了很多用户，我使用php函数传递用户的id并返回一个div弹出窗口，显示他们的在线状态，头像，统计信息等。问题是代码当前设置为显示图层onmouseover并隐藏图层onmouseout。我想代码是onclick show，然后第二次点击（在同一个链接上切换或点击页面上的任何其他位置）隐藏图层，但我不知道如何实现它。

我使用的当前代码来自Dynamic Drive。（对不起，我的tab键在这个文本框中不起作用，不知道如何修复它。随意编辑）

跳到底部

原始方法：

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>";

我想要切换/模糊而不是鼠标输出的主要原因是用户有机会实际点击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>

我之前提到的这种方法的问题是，当我点击用户名链接时，会显示页面上显示的所有用户的所有图层。我怎样才能使它只显示父链接的子层？此外，有没有办法在单击页面上的任何其他位置时隐藏图层？

Answer 1

从旧代码开始，我假设你有类似的东西：

elem.onmouseover = showCard;
elem.onmouseout = hideCard;

那么，从那里你只需要做一些事情：

elem.isShown = false;
elem.onclick = function() {
    if( elem.isShown) hideCard();
    else showCard();
    elem.isShown = !elem.isShown;
}

Answer 2

这最终成为最好的解决方案，尽管我希望还有一件事情是不同的。

这是基于丹的回应。它之前没有工作的原因是因为用户信息是在标签内部，我切换用户名到跨度和内容显示。之后的问题是，当我点击一个用户名时，该图层会弹出，但它会保留，直到我再次点击同一个链接。因此，有时会同时打开多个图层。

当用户点击图层，图层外部或原始链接时，以下内容会关闭图层。一个小问题是，当点击原始链接以关闭图层时，您必须单击两次。

<强>的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>

Javascript在点击/切换时显示/隐藏DIV

2 个答案: