Question

你好，来自javascript n00b。

我正在尝试使用一些基本的jquery代码创建自己的菜单转换。

这个想法是菜单可见，当用户点击“关闭”时，菜单将向左滑动并保持等待状态，当用户点击“打开”时，菜单将滑回到它的位置。 / p>

不幸的是，这适用于第一次点击，之后没有。如果有人回答这个问题，我会非常感激地向我简要解释为什么它不起作用，因为我正努力学习。

这是我的HTML代码

                 <div class="menubar" id="side">

                  </div>

                  <span class="menu close" id="close"></span>
                  <span class="menu open" id="open"></span>

我的CSS：

        .menubar
        {
            position:absolute;
            left:0;
            top:0;
            z-index:9;
            height:100%;
            width:350px;
            background:blue;
            display:block;
        }

        .menu
        {
            position:absolute;
            left:360px;
            top:15px;
            z-index:9;
            width:50px;
            height:50px;
            display:block;
            opacity:1 !important;
            cursor:pointer;
        }

        .close
        {
            background:red;
        }

        .open
        {

            left:10px;
            display:none;
            background:green;
        }

我的Javascript：

        var $ = jQuery;

            $("#close" ).one( "click", function() {
            $( ".menubar" ).animate({left: "-350px"}, 300, function (){
              });
            $(this).css("display", "none");
            $("#open").css("display","block")
        });


            $("#open" ).one( "click", function() {
            $( ".menubar" ).animate({left: "0px"}, 300, function (){
              });
            $(this).css("display", "none")
            $("#close").fadeIn(300)
        });

我的jsFiddle：

http://jsfiddle.net/JjqVy/

非常感谢

Answer 1

只需在您的JS代码中将.one（）更改为.on（）即可。

Answer 2

顾名思义，传递给.one()方法的函数每个事件类型每个元素最多执行一次。请改用.on()：

var $ = jQuery;

$("#close").on("click", function() {
    $(".menubar").animate({left: "-350px"}, 300, function () {
    });
    $(this).css("display", "none");
    $("#open").css("display", "block")
});


$("#open").on("click", function() {
    $(".menubar").animate({left: "0px"}, 300, function () {
    });
    $(this).css("display", "none")
    $("#close").fadeIn(300)
});

Answer 3

改为使用：

$(document).ready(function() {
    $("#id").click(function() {
         whatever you want
    });
});

只会执行一次：）

传递给jQuery的one（）方法的函数仅在第一次触发事件时执行

3 个答案: