Question

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

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

以下是我的代码：

$('.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

您需要在列表中放置索引并跟踪该索引：

如果索引小于列表SELECT REPLACE(REGEXP_SUBSTR(request, '.+?\|', 53), '|') FROM ...的一半，您可以使用.length打开＆＃34; contacts_info＆＃34;和slideDown()关闭它。
如果索引大于您要使用的列表slideUp()的一半 .length用于打开＆＃34; contacts_info＆＃34;和slideUp()关闭它。

Answer 2

<强> DEMO HERE

只需在next.slideToggle(300)

之后添加此行

$("html").animate({ scrollTop: $(next).scrollHeight}, 1000);

如果<div>位于容器<div>的底部，我怎样才能让<div>向上成长？

2 个答案: