按钮打开下一个下拉 jQuery答案

【问题标题】：Button to open next dropdown jQuery按钮打开下一个下拉 jQuery
【发布时间】：2019-08-29 17:48:38
【问题描述】：

所以我正在重构和重新设计一个旧应用程序，我有多个下拉菜单，其中包含供人们输入的数据，我希望有一个按钮，当点击时滚动到下一个并打开它只是为了更容易通过表格。

我的 html 代码如下所示：

<?php foreach loop that adds more dropdowns when entered in through a modal when they click new?>

   <button class="tEntry-collapsible-btn tsHeader-collapsible-btn waves-effect" 
    id="testing"
    type="button"
    style="background-color: sienna !important;"></button>

    <div class="tEntry-collapsible-row>
         <div class="tTable-row">
             //content to dropdown
         </div>
    </div>
    ....usually around 10-15 dropdown menus with the collapsible btn
<?php loop++ ?>

我添加了一张照片以供参考，下拉按钮颜色协调，我在底部添加了一个下一个按钮（最小样式），截至目前，当单击按钮时它会下降，但我也想要一个单击该按钮时，我想会聚焦下一个按钮，然后将其打开，以便在向下浏览页面时获得更流畅的体验。

【问题讨论】：

标签： php jquery html mobile-website

【解决方案1】：

这样的？

找到next 下拉菜单并使用.scrollIntoView() 滚动到它。

您只需调用将下拉列表放在next 元素上的函数。

注意：在 sn-p 中不能正常工作...尝试my codepen

$(function() {

  $(document).on('click', '.next', function() {
    var el = $(this).closest('.dropdown');
    var parent = el.closest('.wrap');
    var next = el.nextAll('.dropdown').first();
    
    // scroll like this
    // parent.animate({
      // scrollTop: next.position().top
    // }, 1000);
    
    // or like this; I prefer this one
    next[0].scrollIntoView({ behavior: 'smooth', block: 'start' });
  });

});

.wrap {
  height: 200px;
  overflow-y: scroll;
}

.something {
  height: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
  <div class="dropdown">
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
    <button class="next">next</button>
  </div>
  <div class="something"></div>
  <div class="dropdown">
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
    </ul>
    <button class="next">next</button>
  </div>
</div>

【讨论】：