Javascript Can'；t使用next遍历DOM

我有以下标记

<a class="list-group-item" href="#">
    <div class='row'>
        <div class='col-xs-10 shows-submenu'>
            <h4 class="list-group-item-heading">A title</h4>
        </div>
    </div>
</a>

<div class='list-group-item hidden-group-item hide'>
    <div class="row">
        <div class="col-sm-12">
            <p class="list-group-item-text">
              Some text
            </p>
        </div>
    </div>
</div>

但我不能让它工作。next（）方法似乎只有在“shows submenu”类被添加到整个a标记中，而不是我想要的col-xs-10 div中时才起作用

你能不能弄明白这为什么不起作用

谢谢

更换以下部件：

$(this).next('.hidden-group-item')

与

然后再试一次

解释：

next（）

获取匹配元素集中每个元素紧跟其后的同级元素。如果提供了选择器，则仅当它与该选择器匹配时，才会检索下一个同级。

---

而

隐藏组项

不是html中的同级项。

div.hidden-group-item

不是

的同级项。显示子菜单

元素因此将不起作用

您可以使用向上遍历祖先，然后使用

您还可以改进代码

$（函数（）{
$（文档）。在（'单击'，'上。显示子菜单'，函数（）{
var hiddenDiv=$（this）.closest（'a.list-group-item'）。next（'.hidden-group-item'）；
$（'.hidden form item'）。不是（this.addClass（'hide'）；
hiddenDiv.toggleClass（'hide'）；
});
});
.hide{
显示：无
}


一些文本

试试这个：

 $('body').on('click', '.shows-submenu', function() {
      if ($(this).closest(".list-group-item").next('.hidden-group-item').hasClass('hide')) ......

next（）方法将只在同级中工作

像这样使用find（）方法

$.find（'.hidden group item'）.toggleClass（'hide'）
 非常感谢您的快速回复和简要解释，工作正常！要了解DOM traverse，请看一看：感谢Satpal提供了更好的代码和解决方案！
$(this).closest('a').next('.hidden-group-item')

 var hiddenDiv = $(this).closest('a.list-group-item').next('.hidden-group-item');

 $('body').on('click', '.shows-submenu', function() {
      if ($(this).closest(".list-group-item").next('.hidden-group-item').hasClass('hide')) ......