Question

我的HTML结构如下：

<div class="container">
  <div class="menu"></div>
</div>

和Jquery：

$(document).ready(function() {

    $(".container").click(function() {
        $(".menu").css("left", "+=50px");
    });
});

终于CSS：

.container{
  position:relative;
  height:50px;
  width:auto;
  background:lightgray;
}

.menu{
  position:absolute;
  width:50px;
  height:35px;
  background-color:green;
  bottom:0px;
  left:0px;
  transition: left 1s;
}

以下是上述代码的JSFiddle。

我的目标是将.menu div拉到左边，重力排在左边。但点击该div应该向右移动。它必须像飞扬的鸟类如何工作，但侧身。

Answer 1

您可以使用animate callback功能将位置移回右侧，

$(".container").click(function() {
    $(".menu").stop().animate({left : "+=50px"},1000,function(){
        $(".menu").animate({ left : "0" },1000);
    });
});

并从transition中删除css。

检查这个小提琴.. http://jsfiddle.net/85QCk/14/

Answer 2

这是你在找什么？您必须致电e.stopPropagation();以停止container的孩子中的点击事件或我们案例中的menu传播并触发container上的点击事件或父母。

var menuOpen = false;

$(document).ready(function () {

    $(".container").click(function () {
        if (!menuOpen) {
            $(".menu").css("left", "+=50px");
            menuOpen = true;
        }
    });

    $(".menu").click(function (e) {
        e.stopPropagation();

        if (menuOpen) {
            $(".menu").css("left", "-=50px");
            menuOpen = false;
        }
    });
});

以下是JSFiddle代码的示例。

继续向左拉分区

2 个答案: