3

这是一个超级简单的问题。我基本上知道我想要什么以及如何去做，我不确定在某个部分使用什么选择器。如果我去掉 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;
    }
}
4

2 回答 2

6

这是一个正常工作代码的小提琴：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 的修改版本。代码的所有功劳都归于他。

于 2013-07-12T16:18:32.343 回答
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');
    });
});

小提琴

于 2013-07-12T15:56:33.630 回答