切换下一个 div jquery 不工作

Question

我想 show/hide 使用 JQuery 一个 div。我在一页上有几个这样的。我正在尝试编写一些东西，当单击 link 和 class "toggle" 时会触发。然后它将查找下一个 div，相对于单击的 link，class="showHide"，然后根据其当前状态显示或隐藏它。

我遇到的问题是 .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') 把我绊倒了。

我也用 .first() 试过 .nextAll('.showHide')，但也没用。

Answer 1

试试这个：

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

Answer 2

jQuery的next() selects the "immediately following sibling" of the matched element. Similarly, nextAll()选择"all following siblings"。在您的代码中，两个元素（.trigger 和 .showHide）不是兄弟姐妹。

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

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

.showHide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 class="medium-10 columns"><small class="toggle">Show / hide</small></div>
  <div class="medium-12 columns showHide">...</div>
  <div class="medium-10 columns"><small class="toggle">Show / hide</small></div>
  <div class="medium-12 columns showHide">...</div>
</div>

切换下一个 div jquery 不工作

Toggle next div jquery not working

jquery

next