javascript - 展开/折叠将 div 向下推到页面下方的 div

Question

我在一个页面上有 9 个方 block ，当您单击一个方 block 时，我希望在其下方显示一个全宽的 div 并将上方的方 block 向下推。

我一直在尝试按照教程来理解这背后的 JS，但我无法让它工作。

代码笔: http://codepen.io/SaraTez/pen/QEmPjX

<ul class="grid-list">
  <li class="li">One</li>
  <li class="li">Two</li>
  <li class="li">Three</li>
  <li class="li">Four</li>
  <li class="li">Five</li>
  <li class="li">Six</li>
  <li class="li">Seven</li>
  <li class="li">Eight</li>
  <li class="li">Nine</li>
  <li class="li">Ten</li>
  </ul>

JS

$(".grid-list .li").click(function(){
var .li=$(this);

if ($(this).hasClass("active")) {
    $(".grid-list .li.cloned-expand").remove();
    $(".grid-list .li").removeClass("active");
}
else {
    $(".grid-list .li.cloned-expand").remove();
    $(".grid-list .li").removeClass("active");
    var cloned=.li.clone().addClass("cloned-expand").append("<span  class='cloned-expand-close'>X</span>");
    .li.addClass("active").after(cloned);
    $('html, body').animate({
        scrollTop: $(this).offset().top
    }, 400);
}
});

$(document).on("click", ".cloned-expand-close", function(){
    $(".grid-list .li.cloned-expand").remove();
    $(".grid-list .li").removeClass("active");
});

框按应有的方式显示，但点击时没有任何功能发生，所以我认为这是我的 html 的 JS 问题/语法。

谁能帮忙解决这个问题？或者，如果您看到了我最终想要实现的任何好的例子，那将是很好的

Answer 1

它不起作用，因为你错误地定义了你的变量。

这样定义:

var li=$(this);

    $(".grid-list .li").click(function(){
        var li=$(this);

        if ($(this).hasClass("active")) {
            $(".grid-list .li.cloned-expand").remove();
            $(".grid-list .li").removeClass("active");
        }
        else {
            $(".grid-list .li.cloned-expand").remove();
            $(".grid-list .li").removeClass("active");
            var cloned=li.clone().addClass("cloned-expand").append("<span class='cloned-expand-close'>X</span>");
            li.addClass("active").after(cloned);
            $('html, body').animate({
                scrollTop: $(this).offset().top
            }, 400);
        }
    });

    $(document).on("click", ".cloned-expand-close", function(){
        $(".grid-list .li.cloned-expand").remove();
        $(".grid-list .li").removeClass("active");
    });

* {
  box-sizing: border-box;
}
  .li {
    display: inline-block;
    width: 15%;
    height: 100px;
    line-height: 100px;
    border: 1px solid;
    margin: 0 1% 10px 0;
    text-align: center;
    position: relative;   
    cursor: pointer;
    &:hover {
      background-color: #eee;
    }
    .li:active {
        background-color: #eee;
        &:after {
          content: '';
          height: 0;
          width: 0;
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-top: 10px solid #000;
          position: absolute;
          bottom: -10px;
          left: 50%;
          margin-left: -5px;
        }
      }
    }
  .cloned-expand{
      display: block;
      float: left;
      min-height: 80px;
      width: 97%;
      margin: 0 0 10px;
      padding: 10px 30px;
      -webkit-animation: fadeinLoad .5s forwards;
      -moz-animation: fadeinLoad .5s forwards;
      animation: fadeinLoad .5s forwards;
      &-close {
        position: absolute;
        right: -1px;
        top: -1px;
        height: 20px;
        width: 20px;
        line-height: 20px;
        border: 1px solid;
        text-align: center;        
        cursor: pointer;
    }
  }
}
@-webkit-keyframes fadeinLoad {
    from { opacity: 0;}
    to { opacity: 1; }
}
@-moz-keyframes fadeinLoad {
    from { opacity: 0; -moz-transform: translate(0, -20px); }
    to { opacity: 1; -moz-transform: translate(0, 0); }
}
@keyframes fadeinLoad {
    from { opacity: 0; transform: translate(0, -20px); }
    to { opacity: 1; transform: translate(0, 0); }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="grid-list">
  <li class="li">One</li>
  <li class="li">Two</li>
  <li class="li">Three</li>
  <li class="li">Four</li>
  <li class="li">Five</li>
  <li class="li">Six</li>
  <li class="li">Seven</li>
  <li class="li">Eight</li>
  <li class="li">Nine</li>
  <li class="li">Ten</li>
  </ul>

这是 jsFiddle

希望对您有所帮助:)