0

我有一个 div 在点击时显示/隐藏，这个 div 将通过 ajax 加载从 me.html 加载内容。我正在添加一个添加到此标签的类类，然后当我再次单击添加了类的标签时，它应该隐藏 div。但这不起作用。

$(function() {
    $("#nav a").click(function() { 
        $(this).toggleClass('added');
        if($(".o1").length <= 0) { 
            $("body").append('<div class="o1"></div>');
            $(".o1").load("me.html").css("display","block");
        }
        $(".added").click(function() { 
            $(".o1").css("display","none");
        })
    });
});

有任何想法吗？

4

2 回答 2

1

尝试这个。如果对象不存在，这将设置对象。然后，一旦完成，它将切换它以供将来点击。

$(function() {
    $("#nav a").click(function() { 
        $(this).toggleClass('added');
        if($(".o1").length <= 0)
        { 
            $("body").append('<div class="o1"></div>');
            $(".o1").load("me.html");
        } else if($(this).hasClass("added"))
            $(".o1").hide();
        } else {
            $(".o1").show();
        }
    });
});

将click处理程序添加到您的代码的所有.added链接会产生问题，因为在您的代码中有。

这显示了正在发生的事情的时间线。希望你能跟上。括号中的数字是事件。相同的数字表示它们同时发生。

（1）#nav a被点击然后 #nav a得到一个类added 然后 .o1被添加然后任何与added类的链接都得到一个点击事件

（2）#nav a被点击然后 #nav a删除类added 然后 .o1已经存在然后任何带有added类的链接都会获得一个点击事件（但不是这个链接，但它仍然有之前的点击事件，因为它没有被分离）

(2).added也被视为与上述操作同时单击，因为它是在 (1) 期间附加的

（3）#nav a被点击然后 #nav a得到一个类added 然后 .o1已经存在然后任何与added类的链接都得到一个点击事件

(3).added也被视为与上述操作同时单击，因为它是在 (1) 期间附加的

(4)#nav a被点击然后 #nav a得到一个类added 然后 .o1已经存在然后任何与added类的链接都得到一个点击事件

(4).added也被认为与上述动作同时被点击，因为它是在 (1) 期间附加的 (4).added也被认为与上述动作同时被点击，因为它是在 (3) 期间附加的

ETC ...

要掌握的关键是你不是分离click事件，而是越来越多地附加。

于 2012-09-02T10:15:22.533 回答
0

尝试这个...

<div class="o1"></div>

$(".o1").hide();

$(function() {

    $("#nav a").click(function() { 

            $(this).toggleClass('added');


            if($(this).hasClass('added') == false){ 

                    $(".o1").load("me.html", function(){$(".o1").show()});

                }

            if($(this).hasClass('added') == true){ 

                    $(".o1").hide();

                })
      });
});
于 2012-09-02T10:20:16.680 回答