ulli扩展jquery

我有这个，实际上如何使扩展框总是在单击的li行下方，我的意思是，如果第二个li单击，它将扩展到第一行下方，或者在第四个li之后，等等，如何获得它，同样，当我单击第一个li时，展开打开，但是如果我单击第二个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> 

css:

拉小提琴试试这个

$（文档）.ready（函数（）{
var=false；
$（“.container ul li”）。单击（函数（e）{
if（$（this）.next（）.hasClass（“扩展”））{
$（“.expanded”）.slideUp（“慢”）；
$（“.expanded”）.remove（）；
}
否则{
$（“.expanded”）.slideUp（“慢”）；
$（“.expanded”）.remove（）；
var测试=“
abc
”；
$（此）。在（测试）之后；
$（“.expanded”）.slideDown（“慢”）；
}
}); 
}); 

在你想显示的每一行后面放一个

li.expanded

，就像我所附的小提琴一样

然后使用以下代码切换li

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

---

编辑以使其在第二次单击时关闭，而不是重新跟踪

问题在于响应，而在php上，echo可以使用inserAfter函数吗？非常感谢，每4英里，第一排和第二排的滑动行为@DGS也不同

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

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

        }
    }); 
}); 

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