Question

我查了几个类似性质的问题，但没有找到我正在寻找的东西。我在一个页面上有6个div（JS Fiddle here）并让它们在点击时展开，但是在尝试了几个片段之后，我开始时就没有接近关闭按钮了。感谢您使用关闭按钮关闭如何关闭扩展div的任何指示！

标记：

    $('#div6, #div5, #div4, #div3, #div2, #div1').click(
      function() {
        $(this).animate({
          'width': '100%',
          'height': '100%'
        }, 600).siblings().animate({
          'width': '0',
          'height': '0'
        }, 600);
        $('<button class="show">XClose</button>')
          .appendTo('.wrapper');
      });

    $('.show').click(function() {
      $(this).animate({
        'width': '0',
        'height': '0'
      }, 600).siblings().animate({
        'width': '50%',
        'height': '33.33%'
      }, 600);
      $(this).remove();
    });

   html,
   body {
     height: 100%;
     padding: 0;
     margin: 0;
   }
   .wrapper {
     width: 100%;
     height: 100%;
   }
   #div1 {
     width: 50%;
     height: 33.33%;
     float: left;
     background-color: rgba(215, 176, 44, 0.9);
     background: rgba(215, 176, 44, 0.9);
     color: rgba(215, 176, 44, 0.9);
     ;
   }
   #div1:hover {
     z-index: 55555;
     -moz-box-shadow: 5px 15px 5px #111;
     -webkit-box-shadow: 5px 15px 5px #111;
     box-shadow: 5px 15px 5px #111;
   }
   #div2 {
     width: 50%;
     height: 33.33%;
     float: left;
     background-color: rgba(100, 176, 176, 0.9);
     background: rgba(100, 176, 176, 0.9);
     color: rgba(100, 176, 176, 0.9);
   }
   #div2:hover {
     z-index: 55555;
     -moz-box-shadow: 5px 15px 5px #111;
     -webkit-box-shadow: 5px 15px 5px #111;
     box-shadow: 5px 15px 5px #111;
   }
   #div3 {
     width: 50%;
     height: 33.33%;
     float: left;
     background-color: rgba(129, 153, 92, 0.9);
     background: rgba(129, 153, 92, 0.9);
     color: rgba(129, 153, 92, 0.9);
   }
   #div3:hover {
     z-index: 55555;
     -moz-box-shadow: 5px 15px 5px #000;
     -webkit-box-shadow: 5px 15px 5px #000;
     box-shadow: 5px 15px 5px #000;
   }
   #div4 {
     width: 50%;
     height: 33.33%;
     float: left;
     background-color: rgba(253, 151, 0, 0.8);
     background: rgba(253, 151, 0, 0.8);
     color: rgba(253, 151, 0, 0.8);
   }
   #div4:hover {
     z-index: 55555;
     -moz-box-shadow: 5px 15px 5px #000;
     -webkit-box-shadow: 5px 15px 5px #000;
     box-shadow: 5px 15px 5px #000;
   }
   #div5 {
     width: 50%;
     height: 33.33%;
     float: left;
     background-color: rgba(255, 255, 0, 0.9);
     background: rgba(255, 255, 0, 0.9);
     color: rgba(255, 255, 0, 0.9);
   }
   #div5:hover {
     z-index: 55555;
     -moz-box-shadow: 5px 15px 5px #000;
     -webkit-box-shadow: 5px 15px 5px #000;
     box-shadow: 5px 15px 5px #000;
   }
   #div6 {
     width: 50%;
     height: 33.33%;
     float: left;
     background-color: rgba(191, 84, 61, 0.9);
     background: rgba(191, 84, 61, 0.9);
     color: rgba(191, 84, 61, 0.9);
   }
   #div6:hover {
     z-index: 55555;
     -moz-box-shadow: 5px 5px 15px #000;
     -webkit-box-shadow: 5px 5px 15px #000;
     box-shadow: 5px 5px 15px #000;
   }
   .active {
     height: 100%;
     width: 100%;
   }
   .hide {
     display: none;
   }
   .auto-style1 {
     font-family: Georgia, "Times New Roman", Times, serif;
     font-size: large;
     text-align: center;
     vertical-align: middle;
     color: #FFFFFF;
     margin: 16vh auto auto auto;
   }
   #close {
     float: right;
     display: inline-block;
     padding: 2px 5px;
     background: #ccc;
   }
   #close:hover {
     float: right;
     display: inline-block;
     padding: 2px 5px;
     background: #ccc;
     color: #fff;
   }
   .show {
     position: absolute;
     top: 9;
     right: 0;
     margin-left: -2.5em;
     width: 15em;
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div id="div1">
  </div>
  <div id="div2">
    <p class="auto-style1">This is div2</p>
  </div>
  <div id="div3">
  </div>
  <div id="div4">
  </div>
  <div id="div5">
  </div>
  <div id="div6">
  </div>
</div>

Answer 1

对动态创建的元素使用事件委托：

$(document).on('click','.show', function() {
      $(this).animate({
        'width': '0',
        'height': '0'
      }, 600).siblings().animate({
        'width': '50%',
        'height': '33.33%'
      }, 600);
      $(this).remove();
    });

单击时展开多个div，然后通过关闭按钮恢复

1 个答案: