ulコンポーネントは非表示にならない

私はいくつかのHTML、CSS、Javascriptを使って簡単なメニューを作成しました。主なアイデアは、ユーザーがそれをクリックするまで隠れるべきだが、問題はそれが隠されたページを開始せず、クリックすると何も起こりません.Javascriptがアクティブでない場合と同じです。ここに私のファイルの一部です：ulコンポーネントは非表示にならない

index.htmlを

<head> 
<link rel="stylesheet" type="text/css" href="style/sample.css" /> 
</head> 
<body> 
<script src="js/menu.js" type="text/javascript"></script> 

<div id="container"> 
    <div id="header"> 
     <center> 
      <div class="leftMenu" onclick="toggleMenu()">Menu</div> 
      <a href="./"><h1>Test</h1></a> 
     </center> 
     <ul> 
      <li><a href="about.htm">About</a></li> 
      <li><a href="http://developmentcloud.blogspot.com/">Blog</a></li> 
      <li><a href="contact.htm">Contact</a></li> 
     </ul> 
    </div> 
</div> 
</body>

menu.js

$(document).ready(function() { 
    $('#header ul').addClass('hide'); 
    $('#header').append('<div class="leftMenu" onclick="toggleMenu()">Menu</div>'); 
}); 

function toggleClass() { 
    $('#header ul').toggleClass('hide'); 
    $('#header .leftMenu').toggleClass('pressed'); 
}

sample.css

#header ul.hide { 
    display: none; 
} 

#header div.pressed { 
    -webkit-border-image: url(graphics/button_clicked.png) 0 8 0 8; 
}

私が間違っていることと、それをどう修正することができますか？

出典

2011-01-05 Nathan Campos

少なくとも問題の一部は、作成しているメニュー切り替え欄がtoggleMenu()であり、toggleClass()ではないことです。

EDIT：キーはonclickの属性を削除し、現在のすべてのバインディングイベントを処理するためにjQueryを使用することですhttp://jsfiddle.net/avidal/dDDKz/

：私はそれを正しく動作させるために提案する変化を示しjsfiddleを作りました、および将来のマッチング要素：

$(document).ready(function() { 
    $('#header ul').addClass('hide'); 
    $('#header').append('<div class="leftMenu">Menu</div>'); 

    $('#header div.leftMenu').live('click', toggleClass); 
}); 

function toggleClass() { 
    $('#header ul').toggleClass('hide'); 
    $('#header .leftMenu').toggleClass('pressed'); 
}

出典

2011-01-05 03:13:30

私はコード[2]を変更しても何も変わりませんでしたが、 'onclick'イベントを使用する方が好みです。 –

[OK]を、いくつかのこと：

メイク秒あなたdoctypeを持っていますか？あなたはこれがあなたのコードの一部であると言いました。おそらくあなたはそうですが、確かに、私はこれをとにかく指摘します。あなただけの（それが心配だ場合、それはIE6と互換性がある）HTML5のDOCTYPEを使用することができます。

< DOCTYPE htmlの>
<HTML>
<ヘッド> ...ヘッドのもの、ここで< /ヘッド>
！ <体> ...ここボディのもの< /ボディ>
</htmlの>
jqueryライブラリをロードしていることを確認してください。もう一度、あなたはすでに存在しているかもしれませんが、あなたの基地がここでカバーされていることを確認するだけです。私はあなたの頭に入れておくことをお勧めします。 menu.jsを頭の外に移動し、閉じているBODYタグのすぐ下に移動する必要があります。
ULを非表示にするには、デフォルトのCSSにnoneを表示する必要があります。さもなければ、あなたのスクリプトが動作していたとしても、ページが最初にロードされてJSがクラスを適用するときに隠される前にulが表示されます。あなたのクラスを適用しているページ読み込みとJSの間のギャップでは、ULが見えます。
あなたのスクリプトは本当に最適化されていて、より具体的ではないことをお詫びします（私はベッドの準備をしようとしているときにこれらを書くべきではありません）。しかし、ここで - あなたが正しい方法を呼んでいることを確認してください。私はあなたが追加しているHTMLスニペットで、あなたはtoggleMenu（）を呼び出しているが、実際のJSでは、あなたの関数はtoggleClassと呼ばれている。それらの1つを一致させるように変更してください。

出典

2011-01-05 03:18:14

ulコンポーネントは非表示にならない

答えて

関連する問題