div를 눌러 페이지를 아래로 밀어 넣는 divs

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

의 상자에는 그들이해야하지만, 클릭에서 발생하는 함수가 없습니다으로 표시된다

, 그래서 나는 내 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

는 희망이 도움이 :)