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

我認爲問題的至少一部分是，您創建的菜單切換div使用的功能是toggleMenu()而不是toggleClass()。

編輯：我做了一個的jsfiddle，顯示改變我提議，使其正常工作：http://jsfiddle.net/avidal/dDDKz/

的關鍵是去除的onclick屬性，使用jQuery來處理該事件的所有當前綁定和未來的匹配元素：

$(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'事件，所以事情得到更多的組織我的代碼（這已經很大） – 2011-01-05 03:26:44

好了，幾件事情：

製作小號你有一個文檔類型。你說這只是你的代碼的一部分，所以也許你會這樣做，但是可以肯定的是，無論如何我會指出這一點。你可以只使用HTML5文檔類型（它與IE6兼容，如果這是一個擔心）：

< DOCTYPE HTML >
<HTML>
<頭> ...頭的東西在這裏< /頭>
<體> ...身體的東西在這裏< /身體>
</HTML >
確保您正在加載jquery庫。再次，也許你已經是，但只是確保你的基地被覆蓋在這裏。我建議把它放在你的頭上。您還應該將menu.js移出頭部，並在關閉BODY標籤的下方。
如果您希望UL隱藏起始位置，則應該使用默認CSS來顯示none。否則，即使你的腳本正在工作，你會在ul被隱藏之前看到ul，因爲頁面會首先加載，然後JS會應用這個類。在頁面加載和JS應用您的課程之間的差距，UL將是可見的。
你的腳本可能真的被優化了，我爲沒有更具體的表達而抱歉（當我試圖準備睡覺時不應該寫這些），但我至少會指出最明顯的修復在這裏 - 確保你正在調用正確的方法。我發現在你正在追加的HTML片段中，你正在調用toggleMenu（），但在你的實際JS中，你的函數被稱爲toggleClass。改變其中的一個，讓它們匹配。

來源

2011-01-05 03:18:14

ul組件不會隱藏

回答

相關問題