0 
<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'>dropdown@fiddle.net</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 上的一样。

4

3 回答 3

0

Firebug 说用户名是空的...

将 javascript 代码放在 html 代码下方。它会起作用的。

于 2013-03-18T04:34:05.823 回答
0

如果你加载jquery库，你还不如更简单..

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

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

于 2013-03-18T05:47:15.983 回答
-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">dropdown@fiddle.net</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-18T04:55:04.373 回答