jquery - 我想用 jquery 为菜单 div 设置动画，点击显示/隐藏

Question

当我单击 .nv-menu 链接时，它会显示 div，但如果我再次单击，我希望它以动画方式隐藏，如果我在 .short-menu div 外部单击，我希望它再次隐藏。任何人都可以帮助我吗？

这是下面的代码

<script>
    $(window).ready(function(e) {
            $(".nv-menu").click(function(e) {
                e.preventDefault();

                $(".short-menu").animate({"left":"100px"}, "slow").show();
            });
    });
</script>

Answer 1

更正的代码如下..试试这个

<script>
    $(window).ready(function(e) {
            var a =0;
            $(".nv-menu").click(function(e) {
                e.preventDefault();
                if (a==0)
                  {
                      $(".short-menu").animate({"left":"100px"}, "slow").show();
                      a=1;
                  }
                else
                   {
                     $(".short-menu").animate({"left":"10px"}, "slow");
                       // left: 10px to be back to the position
                       a=0;
                   }
             });

            });
</script> 

Answer 2

您可以使用“状态变量”。

举个例子：

<script>
    $(window).ready(function(e) {
            var state = 1;
            $(".nv-menu").click(function(e) {
                e.preventDefault();
                if(state == 1)
                {
                    $(".short-menu").animate({"left":"100px"}, "slow").show();
                    state = 2;
                }
                else if(state == 2)
                {
                     //do reverse animation here
                }
            });
    });
</script>

Answer 3

.toggle()

$(window).ready(function(e) {
            $(".nv-menu").click(function(e) {
                e.preventDefault();

                $(".short-menu").animate({"left":"100px"}, "slow").toggle(); //replaced toggle here
            });
    });

Answer 4

这样的事情可能值得研究

<script>
    $(window).ready(function(e) {
        var action = 100;
        $(".nv-menu").click(function(e) {
            e.preventDefault();
            $(".short-menu").animate({"left":action+"px"}, "slow");
            action = (action == 100) ? -100 : 100;
        });
    });
</script>

这只是动画进出..您可以将其更改-100为原始状态..

例子：

• 基于单击菜单项的标准切换：http: //jsfiddle.net/AWgrQ/3/
• 添加显示/隐藏，淡入淡出：http: //jsfiddle.net/AWgrQ/4/
• 添加基于在菜单外单击的切换：http: //jsfiddle.net/AWgrQ/5/

Answer 5

这里：

$(window).ready(function() {

        // for clicks on menu:
        $(".nv-menu").click(function(e) {
            e.preventDefault();


            $(".short-menu").animate({"left":"100px"}, "slow").toggle(); 
        });

        // for clicks else where:
        $("body").click(function(e) {
            var target = $(e.target);  
            if (!target.is(".nv-menu"))
                $(".short-menu").animate({"left":"100px"}, "slow").hide();
        });
});