Question

我使用一些HTML，CSS和Javascript完成了一个简单的菜单。主要的想法是它应该被隐藏，直到用户点击它，但问题是它不会启动页面隐藏，当我点击时没有任何反应，就像Javascript不会激活。这是我的文件的一部分：

的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;
}

我犯了什么错误以及如何纠正错误？

Answer 1

我认为至少部分问题是您正在创建的菜单切换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');
}

Answer 2

好的，有些事情：

确保您拥有doctype。你说这只是你代码的一部分，所以也许你这样做，但只是为了确定，无论如何我会指出这一点。您可以使用html5 doctype（如果担心，它与IE6兼容）：

＆lt;！DOCTYPE html＆gt;
＆lt; html＆gt;
＆lt; head＆gt; ...这里有头脑＆lt; / head＆gt;
＆lt; body＆gt; ......身体的东西在这里＆lt; / body＆gt;
＆lt; / html＆gt;
确保您正在加载jquery库。再一次，也许你已经是，但只是确保你的基地在这里涵盖。我建议把它放在你的头上。你还应该将menu.js移出头部，然后移到关闭的BODY标签下面。
如果你想让UL开始隐藏，你应该有默认的CSS显示无。否则，即使你的脚本正常工作，你会看到ul片刻之前隐藏，因为页面首先加载，然后JS将应用该类。在页面加载和JS应用您的类之间的差距中，UL将可见。
你的脚本真的可以优化了，我为没有更具体而道歉（当我想要准备睡觉时不应该写这些），但我至少会指出最明显的修复此处 - 确保您正在调用正确的方法。我看到你在附加的HTML片段中，你正在调用toggleMenu（），但在你的实际JS中，你的函数被称为toggleClass。改变其中一个，使它们匹配。

ul组件不会隐藏

2 个答案: