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 for Gmail、連絡先、タスクのようなドロップダウンメニューを作成することです。

4

3 に答える 3

0

Firebug は、ユーザー名が null であると言います...

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 に答える