在每行jquery之后展开网格中的div

时间：2015-04-07 08:40:45

标签： javascript jquery html css

我有这个，实际上我想制作类似谷歌图片功能的东西，我的意思是如果我点击任何地方李，扩展的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;
}

4 个答案:

答案 0 :(得分：0)

li.after（$（＆＃34; .expanded＆＃34;））是您需要的唯一代码行。

＆＃13;
＆＃13; 
      $(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;
			}
		});	
	});
＆＃13; 
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;
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

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

  • 显示是否点击了li。
  • 点击相同的 li时隐藏。
  • 先隐藏然后再次显示是否可见并且点击不同的 li。

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

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

接下来，您需要修改您的javascript以检查点击了哪个li。您可以使用＆＃34;扩展＆＃34;变量以跟踪哪个li最后激活了展开的元素。 （我们可以将0视为非活动状态）

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

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

编辑：以下代码段已经过修改，可以将展开的元素移动到其点击的li行。这仅在每行有4个图像时才有效。

＆＃13;
＆＃13; 
$(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;
          });      
        });
      }   
    }); 

    });
＆＃13; 
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;
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

基本上，你需要找出是否点击了两次相同的元素（如果是，只需滑动div），否则 - > gt;向上滑动（关闭'上一个'），然后向下滑动（重新打开）。由于一个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;

    });
  });

答案 3 :(得分：0)

这是你想要的结果吗？如果不是，请告诉我，我的工作类似于你的项目。

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;
        }
    }); 
});
相关问题
最新问题