Question

当我点击.nv菜单链接时，它会显示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/
添加show / hide，淡入和淡出：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();
        });
});

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

5 个答案: