Javascript顯示/隱藏DIV點擊/切換

Question

我在我的頁面上列出了很多用戶，我使用php函數傳遞用戶的ID並返回一個顯示其在線狀態，頭像，統計信息等的彈出窗口。問題在於代碼當前設置爲顯示onmouseover圖層並隱藏圖層onmouseout。我希望代碼是onclick顯示，然後第二次點擊（在同一鏈接上切換或單擊頁面上的任何其他位置）隱藏圖層，但我不確定如何完成此操作。

我使用的當前代碼是從Dynamic Drive獲得的。 （對不起我的tab鍵就不會在該文本框中的工作，不知道如何解決這個問題隨意編輯。）

SKIP TO BOTTOM

原始的方法：

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

這最終被最好的解決方案，但我仍然希望有一件事與衆不同。

這是建立在丹的迴應。在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> 

Answer 2

從舊的代碼開始，我假設你有這樣的事情：

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

那麼，從那裏你只需要做的線沿線的東西：

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