javascript - 为什么我的 jQuery 切换不起作用？

Question

我正在尝试设置侧边菜单，但在使用 jQuery Toggle 时遇到了一些问题。其他一切似乎都运行良好。在发帖之前我确实尝试了大约 2 个小时，所以有点沮丧(看看这是多么基本的东西)。有什么建议么？

以下是我的页面布局的格式和确切顺序，我只添加了分隔 rune 本(“侧边菜单”、“我单击的图像..”等)以使阅读/理解更容易。任何帮助将不胜感激。

侧边菜单:

<div id="SideMenu" class="sidenav">
    <img class="CloseBtn" src="./wht_menu.png" />
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
    <a href="#">Link 4</a>
    <a href="#">Link 5</a>
</div>

我点击打开菜单的图片:

<img class="OpenBtn" src="./blk_menu.png" />

我页面的其余部分:

<div id="main">
My main page content goes here...
</div>

我的 CSS 和 jQuery:

<!--Slider Menu-->
<script>
$(".OpenBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
</script>
<style>
#SideMenu{
width: 250px;
display: none;
}
</style>

Answer 1

您需要将 jQuery 包装在此 block 中 (docs):

$( document ).ready(function() {
    $(".OpenBtn").click(function() {
    $("#SideMenu").fadeToggle("fast", "swing");
    });
});

使用您的代码的工作示例:

http://codepen.io/anon/pen/xEaqqA