下拉显示与JavaScript和CSS

<html> 
<head> 
<script type="text/javascript" src="js/mootools.js"></script> 
<script> 
var username = document.getElementById('username'); 
var menu = document.getElementById('menu'); 

function show_or_hide() 
{ 
    if(menu.style.display!='block') menu.style.display='block'; 
    else menu.style.display='none'; 

} 

username.addEventListener('click', show_or_hide); 
</script> 
<style type='text/css'> 
#dropdown 
{ 
    background: #eee; 
    color: steelblue; 
    display: inline-block; 
} 

#username 
{ 
    padding: .5em 1em; 
} 

#username:hover 
{ 
    background: #eef; 
    cursor: pointer; 
} 
#menu 
{ 
    display: none; 
    padding: .5em 1em; 
} 
</style> 
</head> 
<body> 
<div id='dropdown'> 
    <div id='username'>[email protected]</div> 
    <div id='menu'> 
     <div>menu item a</div> 
     <div>menu item b</div> 
     <div>menu item c</div> 
     <div>menu item d</div> 
    </div> 
</div> 

</body> 
</html>

我试过上面的jsfiddle例子...它在网站的jsfiddle工作正常，但是当我试图在我的网站上实施的确切的代码，我没有运气。我需要包括一个图书馆吗？如果是这样，哪一个？谢谢！我的目标是为Gmail，联系人和任务创建一个类似于Gmail的下拉菜单。下拉显示与JavaScript和CSS

来源

2013-03-18 m1e1b1

向我们展示你的HTML了。 – 2013-03-18 04:26:42

我发布了所有的代码。谢谢！ – m1e1b1 2013-03-18 04:48:21

你能分享链接到mootools.js – 2013-03-18 05:49:04

Firebug表示用户名为空...

将javascript代码放在html代码下面。它会工作。

来源

2013-03-18 04:34:05

它的工作。如果我想用它作为包含，但我会怎么做？ – m1e1b1 2013-03-18 04:56:34

只需在页面末尾添加js文件即可。 – 2013-03-18 04:59:42

-1

try this. I have changed your code. Please check it. it is working fine in both. 

http://jsfiddle.net/DVttJ/3/ 

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#dropdown 
{ 
    background: #eee; 
    color: steelblue; 
    display: inline-block; 
} 

#username 
{ 
    padding: .5em 1em; 
} 

#username:hover 
{ 
    background: #eef; 
    cursor: pointer; 
} 
#menu 
{ 
    display: none; 
    padding: .5em 1em; 
} 
</style> 
<script type="text/javascript"> 
var username = ''; 
var menu = ''; 
window.onload=function(){ 
    username = document.getElementById("username"); 
    menu = document.getElementById("menu"); 
    username.addEventListener("click", show_or_hide); 
} 



function show_or_hide() 
{ 
    if(menu.style.display!="block") menu.style.display="block"; 
    else menu.style.display="none"; 

} 
</script> 
</head> 

<body> 
<div id="dropdown"> 
    <div id="username">[email protected]</div> 
    <div id="menu"> 
     <div>menu item a</div> 
     <div>menu item b</div> 
     <div>menu item c</div> 
     <div>menu item d</div> 
    </div> 
</div> 
</body> 
</html>

来源

2013-03-18 04:55:04

是的，它正在工作 – 2013-03-18 04:55:58

请在这里包括代码，不要只链接到jsfiddle。 – 2013-03-18 08:09:17

如果加载了jQuery库，你不妨去更简单..

$(document).ready(function() { 
    $("#username").click(function() { 
     $("#menu").toggle(); 
    }) 
});

http://jsfiddle.net/djwave28/DVttJ/11/

来源

2013-03-18 05:47:15 Daniel

下拉显示与JavaScript和CSS

回答

相关问题