javascript - 在每行jquery之后在网格中展开一个div

Question

我有这个，实际上我想做一些类似谷歌图片的功能，我的意思是如果我点击 li，展开的 div 总是在包含我点击的 li 的行下面，有什么建议吗？谢谢

fiddle >>

<div class="container">
    <ul>  
      <li>
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li>
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li>
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li>
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li>
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>

     <li class="expanded">
     <div>abc</div>
     </li>

    </ul>
</div>  

JS

$(document).ready(function() {  

    $( ".container ul li" ).click(function() {
        var id = $(this).attr('id');
        var idNum = id.split('-');
        var num = parseInt(idNum[1]);
        var a = Math.ceil(num/4)*4;

        //alert(a);

        $('.container ul li').removeClass('active');
        $(this).addClass('active');
        $('.container ul li li.expanded').slideUp(400,function(){
            $(this).insertAfter($('.container ul li #item-'+a)).slideDown(400);
        })
    }); 
}); 

CSS

body, ul {   
    margin: 0px;
    padding: 0px;  
}
.container {
    width: 90%;
    margin: 0 auto;
}
li {
    width: 23%;
    margin: 10px 1% 0 1%;
    float: left;
    list-style: none outside none;

}
li img {
    width: 100%;
}

.expanded {
    position: relative;   
    display: none;
    background: #ccc;
    z-index: 1;
    width: 100%;
    height: 500px;
}

Answer 1

如果我正确理解你的问题，你希望扩展元素的行为如下:

• 显示是否点击了 li。
• 在点击相同 li 时隐藏。
• 如果它可见并且点击了一个不同的 li，则先隐藏然后再次显示。

有很多方法可以实现这一点。

一种相对简单的方法是区分您的 li 元素，这样您就可以确定单击了哪个特定的 li。这可以通过多种方式完成，但在您的情况下，您可以简单地为每个 li 添加一个唯一的 id。 出于演示目的，我在这里使用了数字 - 您可能希望在代码中更具描述性。

接下来您需要修改您的 javascript 以检查单击了哪个 li。您可以使用“扩展”变量来跟踪最后激活扩展元素的 li。 (我们可以把0看作是它的不活跃状态)

因此，在每次点击时，您都会检查点击的 li 之前是否切换了展开的元素。如果是这样，则只需关闭该元素。如果没有，则关闭该元素并使用回调函数重新打开它。

我希望这能回答您的问题。

编辑:修改了下面的代码片段，将展开的元素移动到其点击的 li 行。这仅在每行有 4 张图像时有效。

$(document).ready(function() {
  
    var expanded = 0;

    $( ".container ul li" ).click(function(e) {
      
      e.preventDefault();
         
      var clicked = $(this).attr("id");
                   
      if (clicked == expanded){
        $( ".expanded" ).slideUp("slow", function(){
            $(".expanded").remove();
            expanded = 0;
          });      
      }else if (expanded == 0){
        $(".container ul #"+Math.ceil(clicked/4)*4).after('<li class="expanded"><div>abc</div></li>');
        $( ".expanded" ).slideDown("slow");
        expanded = clicked;
      }else{
        $( ".expanded" ).slideUp("slow", function(){
          $(".expanded").remove();
          $(".container ul #"+Math.ceil(clicked/4)*4).after('<li class="expanded"><div>abc</div></li>');
          $( ".expanded" ).slideDown("slow", function(){      
            expanded = clicked;
          });      
        });
      }   
    }); 

    });

body, ul {   
    margin: 0px;
    padding: 0px;  
    height:1000px;
   }
   .container {
    width: 90%;
    margin: 0 auto;
   }
   li {
    width: 23%;
    margin: 10px 1% 0 1%;
    float: left;
    list-style: none outside none;

   }
   li img {
    width: 100%;
   }

   .expanded {
    position: relative;   
    display: none;
    background: #ccc;
    z-index: 1;
    width: 100%;
    height: 500px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <ul>  
      <li id="1">
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li id="2">
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li id="3">
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li id="4">
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li id="5">
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li id="6">
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li id="7">
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
      <li id="8">
       <a href="#"><img src="http://s13.postimg.org/8caamw1af/image4.jpg" /></a>
      </li>
            

     

    </ul>
   </div>