jquery - 查找Jquery表中最接近的div

Question

我是 jQuery 新手，我正在尝试使用 jQuery 构建一个简单的响应式选项卡。我知道这是一个常见问题。但我现在无法解决。你能指导我走好路吗？我不知道我的错误是什么。我尝试过 .closest、.parent、find 但它仍然不起作用。

<div class="sn_body_tab">
  <div class="sn_tab_title" id="sn_tab_title" >
    title 1
  </div>
  <div class="sn_tab_content" id="sn_tab_content">
    content 1
  </div>

  <div class="sn_tab_title">
    title 2
  </div>
  <div class="sn_tab_content" id="sn_tab_content">
    content 2
  </div>

  <div class="sn_tab_title">
    title 3
  </div>
  <div class="sn_tab_content" id="sn_tab_content">
    content 3
  </div>
  <script>
    $(document).ready(function () {
      $('#sn_tab_title').on('click', function (event) {
        $(this).closest('#sn_tab_content').slideToggle();
      });
    });
  </script>
</div>

Answer 1

首先，永远不应该有多个具有相同 id 的元素，在这种情况下，sn_tab_content 为此使用类。

由于 sn_tab_content 位于 sn_tab_title 之后，因此您需要使用 .next() 而不是 closest()

$(document).ready(function() {
  $('.sn_tab_title').on('click', function(event) {
    $(this).next('.sn_tab_content').slideToggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sn_body_tab">
  <div class="sn_tab_title" id="sn_tab_title">
    title 1
  </div>
  <div class="sn_tab_content">
    content 1
  </div>

  <div class="sn_tab_title">
    title 2
  </div>
  <div class="sn_tab_content">
    content 2
  </div>

  <div class="sn_tab_title">
    title 3
  </div>
  <div class="sn_tab_content">
    content 3
  </div>
</div>