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

希望有所帮助：）

展开/折叠将div翻过页面的div

1 个答案: