Jquery 我左边的菜单坏了_Jquery_Html_Css_Navigation_Sidebar

Jquery 我左边的菜单坏了

jquery html css navigation

Jquery 我左边的菜单坏了,jquery,html,css,navigation,sidebar,Jquery,Html,Css,Navigation,Sidebar,我正试图根据我在谷歌上看到的一个例子，开发一个左侧菜单，但是当我点击我的“菜单”打开侧菜单时，菜单不会打开这是我的html，其中有一个div id=“menu”，这是我想要在左侧菜单中显示的菜单 <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> </head> <div id="menu">

我正试图根据我在谷歌上看到的一个例子，开发一个左侧菜单，但是当我点击我的“菜单”打开侧菜单时，菜单不会打开

这是我的html，其中有一个div id=“menu”，这是我想要在左侧菜单中显示的菜单

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<div id="menu">
        <ul>
            <li><a href="#">Menu Item 1</a></li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
        </ul> 
</div>
<div id="content">
        <div id="menubar">
            <div id="open_menu">
                Menu
            </div>
        </div>
 </div>

我还有一个div id=“content”，这是一个包含我所有内容的div，当我单击“菜单”打开左侧菜单时，我想将此内容向右推

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<div id="menu">
        <ul>
            <li><a href="#">Menu Item 1</a></li>
            <li><a href="#">Menu Item 2</a></li>
            <li><a href="#">Menu Item 3</a></li>
        </ul> 
</div>
<div id="content">
        <div id="menubar">
            <div id="open_menu">
                Menu
            </div>
        </div>
 </div>

你看到问题出在哪里了吗

我的问题是：

这不是切换的功能。。。查看jQuery文档：

只需使用click事件并以某种方式跟踪自己的状态。以下是一个基于您的小提琴的工作示例：

$('#open_menu').click(function(){
    if ($(this).hasClass('toggled_on')) {
        $(this).removeClass('toggled_on');
        $('#content').animate({ left: 0 }, 'slow', function() {
            $('#open_menu').html('Menu');
        });
    } else {
        $(this).addClass('toggled_on');
        $('#content').animate({ left: 250 }, 'slow', function() {
            $('#open_menu').html('Close');
        });
    }
});

这使用了一个次优的类，所以除非您需要它来做其他事情，否则只需使用一个变量即可。

非常感谢。它像我想要的那样工作，但我真的认为切换适合这个目的！你也许可以使用它，但我相信你对动画的控制会更少

.toggle（）

切换您调用它的元素（这就是按钮在原始小提琴中消失的原因），因此您可以执行以下操作：

$（“#打开"菜单”）。单击（function（）{$（“#content”）.toggle（）}

（它切换内容，而不是菜单）