jquery slide - 如何处理div点击

Question

使用Jquery学习Slide n Hide。无法粘贴代码，因此请改为使用图片。

我有一个主div（黑色），里面有3个div。 [所有边界实际上都是不可见的]。 蓝色div有内容，绿色就像它的标签。任务是在绿色点击时向左滑动内容。

幻灯片工作正常。这就是它现在的工作原理 - 在页面加载时只能看到绿色标签。点击整个红色div内的任何地方，内容向左展开。点击黑色div内的任何地方，它就会崩溃。

但这就是我想要的。 只有点击divGreen而不是其他任何地方时，内容div（蓝色）才会展开。而且，如果点击divBlack外部/内部的任何地方，它应该关闭。 希望这有一定道理。

我尝试$(".divGreen").click(function()，但幻灯片不起作用。

JS：

$(document).ready(function(){
    var r=0, dir=true;
    $(".divBlack").click(function() {
        dir = !dir;
        r = dir? -280 : 0;
        $(this).stop().animate({right: r+'px'}, 800);
    });
});

HTML：

<div class="divBlack">
  <div class="divRed">
     <div class="divGreen"></div>
  </div>
  <div class="divBlue"></div>
</div>

CSS：

.divBlack
{
position:fixed;
right:-280px;
top:49%;
width:300px;
height:500px;
}
.divGreen
{
float:left;
width:33px;
height:130px;
margin-top:380px;
}
.divBlue
{
float:right;
width:260;
height:500px;
}

Answer 1

元素的static位置无法移动。所以你需要设置position:relative

.divBlack{
  position:relative;
}

Answer 2

尝试

$(".divGreen").click(function(event){
  event.stopPropagation();
// uour code goes here
});

详细信息请参阅e.stoppropagation