javascript - 使用 javascript 和 css 下拉

标签 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'>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 的下拉菜单。

最佳答案

Firebug 说用户名是空的...

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

关于javascript - 使用 javascript 和 css 下拉,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15469712/

相关文章:

javascript - 有什么方法可以撤销或撤消 preventExtensions 功能吗?

javascript - 使用ajax上传多个文件到变量文件夹

javascript - 如何在我的元素中单独使用 Twitter Bootstrap 脚本?

javascript - 使用 JQuery 创建 CSS 样式

html - 使用 CSS 创建特定的聊天气泡形状

javascript - 如何标记我的 html 范围 slider ?

Webkit 渐变语法

javascript - 灰尘 : what about performance?

javascript - Amazon DynamoDB 的排序、跳过和限制(跳过)查询

php - 寻找用户可以投票的 super 简单但有效的 BUG/Feature 列表