jquery - 如果 <div> 位于容器 <div> 的底部，我如何使它向上生长？

Question

我想做的是，当单击 div“contacts”时，div“contacts_info”将显示/隐藏我已经实现的。

唯一的问题是单击列表底部的元素时它会向下增长并且列表会在容器中滚动，但我希望它向上增长以便显示“contacts_info”并且不需要向下滚动。

下面是我的代码:

http://jsfiddle.net/jcrL7ocn/

$('.contacts').on('click', function() {
		var next = $(this).next('.contacts_info');
	    next.slideToggle(300);
	    $('.contacts_info').not(next).slideUp(300);
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
  <div id="con_contacts">
    <ul>
      <li>
        <div class="contacts">
          <table style="width: 100%; padding: 10px;">
            <tr>
              <td class="td_left">Somers</td>
              <td class="td_right">3 Feb 15</td>
            </tr>
            <tr>
              <td class="td_left">New Unit Trust Launch</td>
              <td class="td_right">Marketing</td>
            </tr>
          </table>
        </div>
        <div class="contacts_info">
          asf
        </div>
      </li>
      ...
    </ul>
  </div>
</div>

Answer 1

您需要将索引放入列表并跟踪该索引:

• 如果索引小于列表 .length 的一半，您将使用 slideDown() 打开“contacts_info”和 slideUp() 用于关闭它。
• 如果索引大于列表的 .length 的一半，您将使用 slideUp() 用于打开“contacts_info”，slideDown() 用于关闭