Question

我有这个，实际上如何使扩展的框总是在点击的行的行下面，我的意思是如果第二个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

试试这个

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

        }
    }); 
});

Answer 2

在你想要显示的每一行之后放一个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');}
          });
      });
  });

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

编辑使其在第二次点击时关闭而不是重新连接

Ul li扩大了jquery

2 个答案: