Question

这是一个非常简单的问题。我基本上知道我想要什么，怎么做，我很不确定哪个选择器在某个部分使用。如果我拿走toggle（）函数，动画效果很好，但它只能打开菜单，而不能关闭它。

这是我的jquery代码

$(document).ready(function(){
    $('#menu_button').click(function(){
        $(????).toggle(function(){
            $('.sidebar_menu').animate({left:'0'}, 'slow');
            $('.wrapper').animate({'margin-left':'250px'}, 'slow');
        });

    })
});

这是我的页面代码：

<div class="sidebar_menu">
        <h2>Menu</h2>
        <h3>1. Escolher produto</h3>
        <ul>
            <li>Entradas</li>
            <li>Peixe</li>
            <li>Saladas</li>
        </ul>
        <h3>2. Preencher dados</h3>
        <h3>3. Finalizar pedido</h3>
    </div>

    <div class="wrapper">
            <header>
                <button id="menu_button">menu</button>
            </header>
   </div>

我的CSS：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/**MAIN STYLES**/
body {
    height: 100%;
    width: 100%;
    background-color:#C00;
}
.sidebar_menu {
    width: 25%;
    height: 100%;
    display:block;
    position:fixed;
    left: 0;
    top: 0;
    background-color: #666;
}
.wrapper {
    width: 75%;
    float:left;
    margin-left: 25%;
    background-color:#C00;
}
.menu_button {
    display:none;
    }

    .slideIn {
        background-color: #090;
    }

@media screen and (max-width: 50em){
    .sidebar_menu {
        width: 250px;
        left: -250px;
    }
    .wrapper {
        width: 100%;
        margin-left: 0;
    }
    #menu_button {
        display:block;
    }
}

Answer 1

以下是正确使用代码的小提琴：http://jsfiddle.net/6zg7K/1/

您需要将$('.sidebar_menu').animate({'left':(state ? -250: 0)}, 'slow');添加到adeneo提供的代码中，因此您的整个功能将是：

$('#menu_button').on('click', function(){
    var state = parseInt($('.wrapper').css('margin-left'),10) > 200;
    $('.sidebar_menu').animate({'left':(state ? -250: 0)}, 'slow');
    $('.wrapper').animate({'margin-left': (state ? 0 : 250)}, 'slow');
});

此代码是adeneo的修改版本。代码的所有功劳都归他所有。

Answer 2

您必须根据元素左边距创建某种切换功能：

$(document).ready(function(){
    $('#menu_button').on('click', function(){
        var state = parseInt($('.wrapper').css('margin-left'),10) > 200;

        $('.sidebar_menu').animate({left:'0'}, 'slow');

        $('.wrapper').animate({'margin-left': (state ? 0 : 250)}, 'slow');
    });
});

FIDDLE

使用jquery切换（）animate（）

2 个答案: