javascript - Jquery - 单击下一个元素时向上滑动......仅在不同的行上

Question

我有一个点击功能，可以让 div 向下滑动.....当我点击下一个 li 时，我希望前一个 div 向上滑动，新的 div 向下滑动，但只有当它位于不同的行时...... .当它在同一行时，我将把内容放在我想要淡入的 div 中

这是我正在使用的小提琴

http://jsfiddle.net/abtPH/3/

这是我的 jQuery

$('li').on('click', function(e){
  $(this).find('.outer').slideToggle();
  $(this).toggleClass('active', 400);
});

这是我的html

 <ul style="list-style: none;">
   <li>
    <div style="width: 156px; height: 156px; border: solid #cfcfcf 1px; padding: 10px; text-align: center; color: #cfcfcf;"> 156px X 156px</div>

  <div class="outer">
    <div class="inner">
    </div>   
  </div>
  </li>  
<li>
<div style="width: 156px; height: 156px; border: solid #cfcfcf 1px; padding: 10px; text-align: center; color: #cfcfcf;"> 156px X 156px</div>

<div class="outer">
  <div class="inner">
  </div>   
</div>
</li>  
</ul>

Answer 1

我想你正在寻找这样的东西？

$('ul').on('click', 'li:not(li.active + li)', function (e) {
    function toggle(el) {
        el.toggleClass('active', 400);
        el.find('.outer').slideToggle();
    }
    var me = $(this)
    if(me.parent().has(':animated').length == 0) {
        toggle(me.siblings('.active').andSelf());
    }
});

演示：http: //jsfiddle.net/B6TZS/