Моя боковая левая меню не работает

Question

Моя боковая левая меню не работает

0

Im пытается разобрать боковое левое меню, основанное на примере, который я вижу в google, но когда я нажимаю в своем "Меню", чтобы открыть боковое меню, меню не открывается.

Это мой html, где у меня есть div id = "menu", это мое меню, которое я хочу показать в своем боковом меню слева.

У меня также есть 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, который открывает мое боковое левое меню с помощью переключателя медленного elffect и меняет текст моего меню на Menu for Close, когда меню открыто.

$('#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/

UserX 13 май 2014, в 22:39

Источник

Теги:

jquery

html5

css3

navigation

sidebar

1 ответ

Ещё вопросы

Mikk3lRo · Accepted Answer · 2014-05-13T17-30-00.000Z

Это не то, что переключается для... проверьте документацию jQuery: http://api.jquery.com/toggle/

Просто используйте событие 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() переключает элемент, который вы вызываете, хотя (именно поэтому кнопка исчезла в вашей оригинальной скрипке), поэтому вы можете сделать что-то вроде этого: $('#open_menu').click(function(){$("#content").toggle()}) (который переключает содержимое, а не меню)