单击/切换时显示/隐藏Java DIV

Question

我在页面上列出了很多用户，并且使用php函数传递用户ID并返回显示其在线状态，头像，统计信息等的div弹出窗口。问题是当前代码已设置为显示该图层onmouseover并隐藏onmouseout层。 我希望代码显示为onclick，然后第二次单击（在同一链接上切换或在页面上的其他任何地方单击）隐藏该层，但是我不确定如何实现。

我正在使用的当前代码来自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的登录名。我想知道如何使用它来切换用户信息层。

第二种方法：

Java脚本

$(".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

最终，这是最好的解决方案，尽管我仍然希望与此有所不同。

这是基于Dan的回应。 之所以在Dan之前无法使用，是因为用户信息位于标签内，我将用户名切换为span并显示内容。 之后的问题是，当我单击一个用户名时，该层将弹出，但该层将保留直到我再次单击同一链接。 因此有时有时会同时打开多个层。

当用户单击该图层，该图层外部或原始链接时，以下内容将关闭该图层。 一个小障碍是，当单击原始链接以关闭该层时，必须单击两次。

Java脚本

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