Javascript Can'；我不知道在单击某个div以外的任何内容时如何使用jQuery:not（）

我对jQuery动画和CSS选择器有问题

我试图实现的是，当点击div（第一个框，其他两个还不起作用）时（在.work-pive div内），高度变为calc（100%+75px），颜色也变了。不仅如此，当用户单击该div之外的任何位置时，它会恢复为正常形式。我尝试过使用：not（）选择器，但没有成功

另外，我也不知道为什么，但当我点击div时，它会循环六次

任何帮助都将不胜感激

谢谢

$（文档）.ready（函数（）{
$（“.work-thick>div”）.on（'mouseover'，function（）{
美元（本）。法代托（“缓慢”，0.8）；
console.log（“我不知道…”）；
});
$（“.work-thick>div”）.on（'mouseleave'，function（）{
$（这个）.fadeTo（“慢”，0）；
console.log（“我不知道…”）；
});
//.悬停或使用（'鼠标…）
//$（“.work-thick>div”）。在（'click'，function（）上{
//动画（{backgroundColor:“rgb（0197205）”}，“200”）；
//console.log（“我不知道…”）；
//   });
$（“：not（.work-thick>div）”）。在（'click'，function（）上{
$（“.work-工件>div”）。设置动画({
背景色：“rgb（238,0,0）”，
高度：“+=75px”
}, "200");
美元（这一点）。法代托（“慢”，1）；
console.log（“我不知道…'cuz”）；
});
});
。工作行{
左边距：自动；
右边距：自动；
宽度：80%；
高度：200px；
边框样式：实心；
边框宽度：2倍；
}
.分隔行{
左边距：自动；
右边距：自动；
宽度：100%；
高度：75px；
}
1.工件{
身高：100%；
宽度：31%；
背景色：黑色；
显示：内联块；
保证金：0；
垂直对齐：顶部；
}
.工件>分区{
背景色：rgb（230、230、230）；
宽度：100%；
身高：100%；
不透明度：0；
显示：内联块；
}
h3.项目名称{
字体家族：傲慢；
字体大小：30px；
文本对齐：居中；
位置：相对位置；
最高：37.5%；
颜色：rgb（105，105，105）；
页边顶部：自动；
}
.分隔柱{
保证金：0；
宽度：3.5%；
高度：100%x；
显示：内联块；
}

猜猜形状
尝试将jquery代码更改为以下代码：

 $(document).ready(function() {
            var parentBoxHeight = $('.work-piece:first-child').height();
            var firstBoxHeight = $('.work-piece:first-child > div').height();

            $(".work-piece > div").on('mouseover', function() {
                    $(this).fadeTo("slow", 0.8);
                console.log("I dunno...");
            });

            $(".work-piece > div").on('mouseleave', function() {
                    $(this).fadeTo("slow", 0);
                console.log("I dunno...");
            });

            // .hover or use on('mouse...)

         //   $(".work-piece > div").on('click', function() {
              //      $(this).animate({backgroundColor: "rgb(0, 197, 205)"},"200");
             //   console.log("I dunno...");
         //   });

            $(".work-piece > div:first-child").on('click', function(e) {
              e.stopPropagation();
              if($(this).hasClass('clicked')) {
                $(this).parent().animate({                        
                  height: parentBoxHeight
                },"200");
                $(this).animate({
                      backgroundColor: "rgb(230, 230, 230)",
                      height: firstBoxHeight
                  },"200");

                $(this).removeClass('clicked');
              } else {
                $(this).addClass('clicked');
                $(this).parent().animate({                        
                  height: "+=75px"
                },"200");
                $(this).animate({
                      backgroundColor: "rgb(238, 0, 0)",
                      height: "+=75px"
                  },"200");
              }                        
            });

            $(document).on('click', function() {
              if($(".work-piece > div:first-child").hasClass('clicked')) {
                $(".work-piece > div:first-child").parent().animate({                        
                  height: parentBoxHeight
                },"200");
                $(".work-piece > div:first-child").animate({
                      backgroundColor: "rgb(230, 230, 230)",
                      height: firstBoxHeight
                  },"200");

                $(".work-piece > div:first-child").removeClass('clicked');
              } else {
                return false;
              }
            });

        });

这就是您需要的吗？
单击DOM中的事件气泡，使用
event.stopPropagation（）阻止其传播。或者更好的做法是将click event绑定到文档级别，并过滤掉有关
事件的内容。target
看看这个问题：我相信语法不同，它几乎是
$（“.work-piece>div:not”）
。当我单击div时，我确实希望看到这种行为。但是，不要再次单击它以将其恢复到正常状态，您可以这样做吗？这样，当我单击除该div之外的任何内容时，它都会关闭？好的，在更改后再次尝试jquery代码，希望这是您需要的