jquery - jquery ui Show / hide 在 2 次切换后停止工作

Question

我有一个图像 - 单击它时会显示两个子 div，然后在鼠标离开时隐藏它们。

这只能连续工作两次，然后在点击时停止执行任何操作。

$('.art').click(function(){
    var $this = $(this)

    $this.children('.details').children('div').eq(1).show("slide", {direction: "left", easing: "easeOutQuad"}, 200);
    $this.children('.details').children('div').eq(0).show("slide", {direction: "right", easing: "easeOutQuad"}, 200);

    $this.bind("mouseleave", function(){
        $this.children('.details').children('div').eq(0).hide("slide", {direction: "left", easing: "easeOutQuad"}, 200);
        $this.children('.details').children('div').eq(1).hide("slide", {direction: "right", easing: "easeOutQuad"}, 200);
    })
});

Answer 1

每次单击具有.art类的元素时，您都会绑定到 mouseleave。你能告诉我这是否能改善事情吗：

$('.art').click(function(){
    var $this = $(this);

    $this.children('.details').children('div').eq(1).show("slide", {direction: "left", easing: "easeOutQuad"}, 200);
    $this.children('.details').children('div').eq(0).show("slide", {direction: "right", easing: "easeOutQuad"}, 200);
});

$('.art').mouseleave(function(){
    var $this = $(this)
    $this.children('.details').children('div').eq(0).hide("slide", {direction: "left", easing: "easeOutQuad"}, 200);
    $this.children('.details').children('div').eq(1).hide("slide", {direction: "right", easing: "easeOutQuad"}, 200);
    })