JQuery 在鼠标单击时显示和隐藏 div（动画）

这是我的 HTML 代码：

<div id="showmenu">Click Here</div>
<div class="menu" style="display: none;">
    <ul>
        <li>Button1</li>
        <li>Button2</li>
        <li>Button3</li>
    </ul>
</div>

我想展示.menu点击时#showmenu从左向右滑动（使用动画）。再次点击#showmenu或网站页面中的任何位置，.menu将隐藏（滑回左侧）。

我使用 JQuery 2.0.3

我已经尝试过这个，但它没有达到我想要的效果。

$(document).ready(function() {
    $('#showmenu').toggle(
        function() {
            $('.menu').slideDown("fast");
        },
        function() {
            $('.menu').slideUp("fast");
        }
    );
});

That .toggle() method http://api.jquery.com/toggle-event/ was removed来自 jQuery 1.9 版本。你可以这样做：

$(document).ready(function() {
    $('#showmenu').click(function() {
            $('.menu').slideToggle("fast");
    });
});

Demo: http://jsfiddle.net/APA2S/1/ http://jsfiddle.net/APA2S/1/

...但是就像您问题中的代码一样，它会向上或向下滑动。要向左或向右滑动，您可以执行以下操作：

$(document).ready(function() {
    $('#showmenu').click(function() {
         $('.menu').toggle("slide");
    });
});

Demo: http://jsfiddle.net/APA2S/2/ http://jsfiddle.net/APA2S/2/

注意到这需要jQuery-UI的幻灯片效果 http://api.jqueryui.com/slide-effect/，但是您将该标签添加到您的问题中，所以我认为这是可以的。