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组件不会隐藏

回答

相关问题