Question

我想使用JQuery显示/隐藏div。我在一个页面上有几个。我试图写一些会在任何与课程的联系时触发的内容＆＃34;切换＆＃34;点击。然后，它将使用class="showHide"查找相对于点击链接的下一个div，然后根据它的当前状态显示或隐藏它。

我遇到的问题是使用.next（）函数。它似乎不适合我。

JS

$(document).on("click", ".toggle", function(event){
    event.preventDefault();
    $(this).next('.showHide').hide();
});

HTML

<div class="medium-12 columns">
  <h2>Lists</h2>
  <div class="medium-2 columns">
    <h3>Food type</h3>
  </div>
  <div class="medium-10 columns"><small class="toggle">Show / hide</small></div>
  <div class="medium-12 columns showHide">...</div>
</div>

如果我执行类似$(this).css("background", "red");的操作，则可以正常使用。所以，我非常确定.next('.showHide')会让我感到沮丧。

我还尝试使用.nextAll('.showHide') .first()，但也没有。

Answer 1

jQuery的next()选择“紧跟在匹配元素的兄弟”之后。同样，nextAll()会选择“以下所有兄弟姐妹”。在您的代码中，两个元素（java.lang.IllegalArgumentException和.trigger）不是兄弟。

为了使用.showHide，我建议从next()元素遍历到其父.trigger，这是相关.medium-10元素的兄弟。

.showHide

jQuery('.toggle').on('click', function() {
  jQuery(this).parent('.medium-10').next('.showHide').toggle();
});

.showHide {
  display: none;
}

Answer 2

试试这个：

$(this).siblings('div.showHide').toggle();

切换下一个div jquery无法正常工作

2 个答案: