javascript - 不知道如何使用 jQuery :not() when clicking on anything other that certain div

Question

我在使用 jQuery 动画和 CSS 选择器时遇到问题。

我想要实现的是当单击 div(第一个框，其他两个还不起作用)时(在 .work-piece div 内)，高度更改为 calc(100% + 75px)颜色也会改变。不仅如此，当用户单击该 div 之外的任何地方时，它会恢复为正常形式。我试过使用 :not() 选择器，但无法获得任何结果。

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

如有任何帮助，我们将不胜感激。

谢谢。

http://codepen.io/DocRow10/pen/pgRXdv

$(document).ready(function() {

   $(".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...");
   //   });

   $(":not(.work-piece > div)").on('click', function() {
     $(".work-piece > div").animate({
       backgroundColor: "rgb(238, 0, 0)",
       height: "+=75px"
     }, "200");
     $(this).fadeTo("slow", 1);
     console.log("I dunno... 'cuz");
   });

 });

    .work-row {

       margin-left: auto;
       margin-right: auto;
       width: 80%;
       height: 200px;
       border-style: solid;
       border-width: 2px;
     }


     .divider-row {
       margin-left: auto;
       margin-right: auto;
       width: 100%;
       height: 75px;
     }


     .work-piece {
       height: 100%;
       width: 31%;
       background-color: black;
       display: inline-block;
       margin: 0;
       vertical-align: top;
     }


     .work-piece > div {
       background-color: rgb(230, 230, 230);
       width: 100%;
       height: 100%;
       opacity: 0;
       display: inline-block;
     }


     h3.project-name {
       font-family: insolent;
       font-size: 30px;
       text-align: center;
       position: relative;
       top: 37.5%;
       color: rgb(105, 105, 105);
       margin-top: auto;
     }


     .divider-column {
       margin: 0;
       width: 3.5%;
       height: 100%x;
       display: inline-block;
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work-row">
  <div class="work-piece">
    <div>
      <h3 class="project-name">Guess the Shape</h3>
    </div>
  </div>
  <!--
                        -->
  <div class="divider-column"></div>
  <!--
                        -->
  <div class="work-piece"></div>
  <!--
                        -->
  <div class="divider-column"></div>
  <!--
                        -->
  <div class="work-piece"></div>
</div>

Answer 1

尝试将您的 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;
              }
            });

        });

这是你需要的吗？