Question

我试图根据我在谷歌上看到的一个示例来开发左侧菜单，但是当我点击我的＆＃34;菜单＆＃34;打开侧边菜单，菜单不会打开。

这是我的html，我有一个div id =＆＃34; menu＆＃34;这是我想在左侧菜单中显示的菜单。

我还有一个div id =＆＃34;内容＆＃34;，这是一个包含我所有内容的div，我想将此内容推向右边当我点击我的＆＃34;菜单＆＃34 ;打开左侧菜单。

<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，当菜单打开时，打开我左侧菜单的切换缓慢效果，并将菜单文本更改为菜单关闭。

$('#open_menu').toggle( 
    function() {
        $('#content').animate({ left: 250 }, 'slow', function() {
            $('#open_menu').html('Close');
        });
    }, 
    function() {
        $('#content').animate({ left: 0 }, 'slow', function() {
            $('#open_menu').html('Menu');
        });
    }
);

你知道问题出在哪里吗？

我的问题是： http://jsfiddle.net/3Gezv/

Answer 1

这不是切换的目的...检查jQuery文档： http://api.jquery.com/toggle/

只需使用点击事件并以某种方式自行跟踪状态。这是一个基于你的小提琴的工作示例：

$('#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');
        });
    }
});

这使用了一个次优的类，所以除非你需要它，否则只需使用变量。

我的左侧菜单不起作用

1 个答案: