JQuery在鼠标单击（动画）上显示和隐藏div [英] JQuery show and hide div on mouse click (animate)

问题描述

这是我的HTML代码：

This is my HTML code:

<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 将隐藏（向后滑动）。

And I want to show .menu on click on #showmenu sliding from left to right (with animate). On click again on #showmenu or anywhere in site page, .menu will hide (slide back to left).

我使用JQuery 2.0.3

I use JQuery 2.0.3

我试过这个，但它没有做我想要的。

I've tried this, but it doesn't do what I want.

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

推荐答案

.toggle（）方法从版本1.9中的jQuery 删除。你可以这样做：

That .toggle() method was removed from jQuery in version 1.9. You can do this instead:

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

演示： http://jsfiddle.net/APA2S/1/

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

...but as with the code in your question that would slide up or down. To slide left or right you can do the following:

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

演示： http://jsfiddle.net/APA2S/2/

注意到这需要 jQuery-UI的幻灯片效果，但你在标题中添加了这个标签，所以我认为没问题。

Noting that this requires jQuery-UI's slide effect, but you added that tag to your question so I assume that is OK.

这篇关于JQuery在鼠标单击（动画）上显示和隐藏div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！