Ul li展开jquery

Question

我有这个，实际上如何让展开的框总是在点击li的行下面，我的意思是如果第二个li点击它会展开在第一行下面，或者在第四个li之后等等，如何获得它，当我点击第一个李，扩大开放，但如果我点击第二个李将关闭，如何使我像点击第一个李，其开放，当我点击其他李，它会先关闭再打开，由于

HTML：

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

的jQuery：

$(document).ready(function() { 

    var expanded = false; 

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

个

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

FIDDLE >>

Answer 1

把一个li.expanded。

然后使用下面的代码来切换李

$(document).ready(function() { 
     $(".container ul li").click(function (e) { 
      var $closest_li = $(this).nextAll('.expanded').first(); 
      var needs_to_close = $closest_li.is(':visible'); 
      $(".expanded").slideUp("slow", function(){ 
       if(!needs_to_close){$closest_li.slideDown('slow');} 
      }); 
     }); 
    }); 

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

编辑，以使其关闭点击第二次，而不是retoggle

Answer 2

尝试要显示像拨弄我重视每排在这之后

Demo

$(document).ready(function() { 

    var expanded = false; 

    $(".container ul li").click(function(e) { 
     if ($(this).next().hasClass("expanded")) { 
      $(".expanded").slideUp("slow"); 
      $(".expanded").remove(); 
     } 
     else { 
      $(".expanded").slideUp("slow"); 
      $(".expanded").remove(); 
     var test = '<li class="expanded"> <div>abc</div> </li>'; 
      $(this).after(test); 
      $(".expanded").slideDown("slow"); 

     } 
    }); 
});