Question

我试图设置一个侧边菜单并且在使用jQuery Toggle时遇到了一些问题。其他一切似乎都很好。在发布这里之前我确实尝试了大约2个小时，所以有点沮丧（看看这是非常基本的东西）。有什么建议？

以下是我的页面布局的格式和确切顺序，我只添加了分隔符文本（＆＃34;侧边菜单＆＃34;，＆＃34;图像我点击..＆＃34;等等）使阅读/理解更容易。任何帮助将不胜感激。

侧边菜单：

<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＆amp; jQuery：

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

Answer 1

您需要将jQuery包装在此块（docs）中：

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

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

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

Answer 2

当时有可能没有在页面上加载jQuery。

<script>
(function($){
    $(document).ready(function(){
        $(".OpenBtn, .CloseBtn").click(function() {
            $("#SideMenu").fadeToggle("fast", "swing");
        });
    });
})(jQuery);
</script>

Answer 3

感谢大家的帮助！虽然pivemi的答案不是解决方案，但是对他的codepen链接进行更深入的审查会让事情变得有效，我的文档并没有调用jQuery库。将此添加到顶部是我的解决方案：

<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>

Answer 4

您的CSS可能如下所示：

.menu {
position: fixed;
height: 100%;
width: 272px;
padding-bottom: 50px;
overflow: auto;
box-shadow: 0 0 10px 0 rgba(0,0,0,.75);
background-color: #fff;
z-index: 999;
display: none;}

你的jQuery脚本：

$(document).ready(function(){
$('.show-menu').click(function(){
    fade_menu();
});
$('.menu-item').click(function(){
    fade_menu();
});});});

function fade_menu(){
        $('.menu').fadeToggle("fast");
}

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

4 个答案: