Expand div/div divs push div divs down the page

Question

我在页面上有9个方格，当你点击一个正方形时，我想要一个完整宽度的div出现在它的下方，并将方框向下推。

我一直在试图按照教程了解这背后的JS，但我无法得到它的工作。

Codepen： 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"); 
}); 

的框显示，因为他们应该，但没有功能上发生的点击，所以我认为这是一个JS问题/语法与我的HTML 。

任何人都可以帮助解决这个问题吗？或者，如果您已经看到我最终希望实现的任何良好示例，那将是好的

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

希望它能帮助:)