如何切换显示：无，显示：块

Question

 $(document).ready(function() {
  ('.button').click(function() {
    let item = $(this).closest('item');
    if (item.css.('display') === 'none') {
      item.show();
      item.css('display', 'block');
    } else if (item.css.('display') === 'block') {
      item.hide();
      item.css('display', 'none');
    }
  });
});

 .item {
  display: none;
}

 <div class="container">
  <button class="button">Click</button>
  <div class="front">front page</div>
  <div class="item">
    This is a paragraph with little content. This is another small paragraph.
  </div>
</div>

目的是在单击按钮时隐藏和显示当前 div。我有相同的容器具有相同的类名。如果我使用简单的切换按钮，单击按钮后，所有其他容器都会被切换。在这种情况下，只有当前容器必须显示和隐藏。类容器的第一个 div 子项最初显示，第二个 div 子项隐藏/显示：无。单击按钮后，显示第二个 div 子项，display:none 更改为 display:block。这里的代码似乎不起作用。

原文由 anni 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 .siblings()

给定一个表示一组 DOM 元素的 jQuery 对象，.siblings() 方法允许我们在 DOM 树中搜索这些元素的兄弟姐妹，并从匹配的元素构造一个新的 jQuery 对象。

工作片段：-

 $(document).ready(function() {
  $('.button').click(function() {
    $(this).siblings(".item").toggle();
  });
});

 .item {
  display: none;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button class="button">Click</button>
  <div class="front">front page</div>
  <div class="item">
    This is a paragraph with little content. This is another small paragraph.
  </div>
</div>

原文由 Anant - Alive to die 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

使用 parent() 查找当前按钮单击元素，然后在该容器中找到 .item 类并简单地使用 fadeToggle() 隐藏 和 显示 元素，如下所示。

 $(document).ready(function(){
    $('.button').click(function(){
        $(this).parent().find(".item").fadeToggle();
    });
});

 .item{display:none;}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <button class="button">Click</button>
    <div class="front">front page</div>
    <div class="item">
        This is a paragraph with little content.
        This is another small paragraph.
    </div>
</div>

原文由 Prateik Darji 发布，翻译遵循 CC BY-SA 3.0 许可协议