Question

首先，我想从@kgd打开这个解决方案，然后当我点击另一个div时，我想向后关闭它...在这个例子中，小提琴中的黄色div？

var $a = $(".a"),
    $b = $(".b"),

function anim1() {
    $b.animate({width: 395}, {duration: 500, complete: anim2});
}

function anim2() {
    $a.animate({top:"0px"}, {duration: 500});
}

$(".b").click(function() {
    anim1();
});

var $a1 = $(".a"),
    $b1 = $(".b"),
    
function anim10() {
    $a1.animate({top:"-50px"}, {duration: 500});
}

function anim20() {
    $b1.animate({width: 137}, {duration: 500, complete: anim10});
}

$(".ab").click(function() {
    anim10();
});

.example {
    width: 100%;
}

.a {
    width: 600px;
    height: 50px;
    background-color: #888;
    
    position: relative;
    top: -50px;
}

.ab {
    width: 50px;
    height: 50px;
    background-color: yellow; 
    float: left;
}

.b {
    width: 137px;
    height: 50px;
    background-color: red;
    margin-left: 50px;
    float: left;
}

.c {
    width: 395px;
    height: 50px;
    background-color: black;
    margin-left: 100px;
    
    position: relative;
    top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="example">
    <div class="c"></div>
    <div class="a">
        <div class="ab"></div>
        <div class="b"></div>
    </div>
</div>

为什么我的解决方案不起作用？

Answer 1

代码已更新here。您遗漏了一些逗号，声明了阻止代码运行的变量。

var $a = $(".a"),
    $b = $(".b");

var $a1 = $(".a"),
    $b1 = $(".b");

<强>更新

我做了一些小改动，但根据代码和有限的解释确定你要完成的工作真的很难。我提供的是工作代码，这可能会帮助您朝着正确的方向前进？

激活div功能并向后

1 个答案: