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"); 

     } 
    }); 
});