jQuery：TabAccordion - 如何找到 DOM 中的下一个元素

Question

我希望用户点击某个区域中的 link 并且 DOM 中带有 class .zutdescr 的下一个元素应该 open/close.

不幸的是，我在选择正确的元素时遇到了问题

为了更好地理解，我构建了一个简单的示例。

$('.rev-btn').click(function() {
            var $zutdescription = $(this).closest('div').find('.zutdescr').first();
            $zutdescription.toggleClass('ausgefahren');
});

.zutdescr {
    height: 0;
    overflow: auto;
    color: red;
}

.ausgefahren{
    height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toplevel">
  <ul>
    <li class="rev-btn">1</li>
  </ul>
  <ul>
    <li class="zutdescr">Descr</li>
  </ul>
  <ul>
    <li class="rev-btn">2</li>
  </ul>
  <ul>
    <li class="zutdescr">Descr</li>
  </ul>
  <ul>
    <li class="rev-btn">3</li>
  </ul>
  <ul>
    <li class="zutdescr">Descr</li>
  </ul>
</div>

我尝试了 next() 和 nextAll() 但根本不起作用。

感谢您的帮助！

Answer 1

$('.rev-btn').click(function() {
 var position = $('.rev-btn').index(this);
var elementToToggle = $('.toplevel').find('.zutdescr');


    elementToToggle.each(function( index ) {
 if(index == position){
  $(this).toggleClass('ausgefahren');
 }
    
});
});

.zutdescr {
    height: 0;
    overflow: auto;
    color: red;
}

.ausgefahren{
    height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toplevel">
  <ul>
    <li class="rev-btn">1</li>
  </ul>
  <ul>
    <li class="zutdescr">Descr</li>
  </ul>
  <ul>
    <li class="rev-btn">2</li>
  </ul>
  <ul>
    <li class="zutdescr">Descr</li>
  </ul>
  <ul>
    <li class="rev-btn">3</li>
  </ul>
  <ul>
    <li class="zutdescr">Descr</li>
  </ul>
</div>

jQuery：TabAccordion - 如何找到 DOM 中的下一个元素

jQuery: TabAccordion - How to find the next element in DOM from clicked this

jquery

dom

traversal

dom-traversal

jquery-traversing