在每行jquery之后在网格中展开一个div答案

【问题标题】：Expand a div in a grid after each row jquery在每行jquery之后在网格中展开一个div
【发布时间】：2015-06-11 19:10:42
【问题描述】：

我有这个，实际上我想制作类似谷歌图片功能的东西，我的意思是如果我点击任何地方的 li，展开的 div 总是在包含我点击的 li 的行下方，有什么建议吗？谢谢

小提琴>>

<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>

$(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;
}

【问题讨论】：

你的问题不清楚！！能说的具体点吗？？
只有一个扩展的 div 吗？
你需要类似这个codepen.io/gabrieleromanato/pen/dDyzH吗？
我已经编辑了@guruprasad-rao 的问题，是的，只有一个 div
我会从 ajax 更新那个 1 然后@nevermind

标签： javascript jquery html css

【解决方案1】：

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

如果点击了 li 则显示。
点击相同的 li 时隐藏。
如果它可见并且点击了不同的 li，则先隐藏然后再显示。

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

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

接下来你需要修改你的 javascript 来检查哪个 li 被点击了。您可以使用“扩展”变量来跟踪上次激活扩展元素的 li。（我们可以将0视为它的非活动状态）

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

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

编辑：下面的 sn-p 已被修改为将展开的元素移动到其单击的 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>

【讨论】：

$(this).insertAfter($('.container ul li #item-'+a)).slideDown(400); @peter-ringelmann
我想我误解了你原来的问题:)
jsfiddle.net/3a7pjeb9/13@peter-ringelmann 喜欢谷歌图片结果功能
@Sandra.G 请查看我修改后的 sn-p。
我可以添加如果 Math.ceil(clicked/4)*4) = 超过 4 它会像 $("html, body").animate({scrollTop: 485}, 500) ; @peter-ringelmann

【解决方案2】：

li.after($( ".expanded" )) 是您在此处需要的唯一代码行。

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

		$( ".container ul li" ).click(function(e) {
            var li =$(this);
			if (expanded) {
                li.after($( ".expanded" ));
				$( ".expanded" ).slideUp("slow");
				expanded = false;
			}
			else {
                li.after($( ".expanded" ));
				$( ".expanded" ).slideDown("slow");
				expanded= true;
			}
		});	
	});

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

【讨论】：

不，不是克隆，我只需要在@puneet 之后插入
@Sandra.G，现在就试试吧。
$(this).insertAfter($('.container ul li #item-'+a)).slideDown(400); @puneet

【解决方案3】：

基本上，您需要确定是否单击了两次相同的元素（如果是，只需向上滑动 div），否则 -> 向上滑动（关闭“上一个”），然后向下滑动（重新打开）。由于有一个 div 存在问题，因此引用“previous”没有太多意义，实际上，我不确定这将如何与提到的 ajax 一起使用......但是，归功于：icktoofay (How to see if you're clicking the same element twice? Jquery)，这里是： http://jsfiddle.net/3a7pjeb9/11/

 $(document).ready(function() {

    var previousTarget = null;
    $(".container ul li").click(function(e) {

      if ($('.expanded').is(':visible') != true) {

        $(".expanded").slideDown("slow");
      } else {
        if (this === previousTarget) {
          $(".expanded").slideUp("slow");
        } else {

          $(".expanded").slideUp("slow");
          $(".expanded").slideDown("slow");
        }

      }
      previousTarget = this;

    });
  });

【讨论】：

jsfiddle.net/3a7pjeb9/13 其实我只需要插入 div 4th li, 8th li, 12th li, 取决于 li 停留在哪一行@nevermind
'div 4th li, 8th li, 12th li' - 这是什么意思，抱歉？原始问题的代码/示例并不接近这个......但是 - 对于“谷歌图像”功能 - 你只需要一件事 - >获取图像 src 并在大的“扩展”div中显示它（我认为你已经结束了- 使这复杂化）。 :)
是的，就是这样，但我只需要插入之后，我已经从 ajax 推送内容实际上是为了这个扩展的 div @nevermind

【解决方案4】：

这是你想要的结果吗？如果不是，请告诉我，我正在从事与您类似的项目。

http://jsfiddle.net/3a7pjeb9/14/

$(document).ready(function() {  

    var expanded = false;

    $( ".container ul li" ).click(function(e) {
        if (expanded) {
            $( ".expanded" ).slideUp("slow").children().remove();



            expanded = false;
        }
        else {
            $( ".expanded" ).slideDown("slow");
            $(this).clone().appendTo('.expanded');

            expanded= true;
        }
    }); 
});

【讨论】：

我不确定我是否理解图片。您希望当用户单击图像时将包含相应图像（或不包含）的
向下滑动，并且当
向下滑动时其余图像也向下滑动？
不，只有被点击的人才会下楼，其余的还在他们旁边@eddnewgate