如何切换 display:none 和 display:block？

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。我有相同类名的容器。如果我仅使用toggle按钮，则点击按钮后，每个其他容器都会切换。在这种情况下，仅当前容器必须显示和隐藏。类容器的第一个div子元素最初显示，第二个div子元素被隐藏/display:none。单击按钮后，第二个div子元素将显示，display:none将更改为display:block。这里的代码似乎不起作用。

- anni

---

你的代码存在一些问题....closest('') 只搜索父节点，所以实际上不会返回任何内容。此外，你的 closest('.item') 缺少 . 来表示它正在查找的是类。 - Levidps

还有您的一个 jQuery 调用缺少函数名称（$）... - I wrestled a bear once.

由于您正在使用jQuery，您可能希望只使用方法toggle() https://api.jquery.com/toggle/。 - Adriano

你不需要同时使用 hide/show 和 css。除了改变 CSS，你认为 hide 和 show 还有什么作用？ - Barmar

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

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

Answer 3

<script>
$(document).ready(function(){
    $(".button").click(function(){
        $(".front").toggle();
        $(".item").toggle();
    });
});
</script>
<style type="text/css">
    .item{display: none;}
</style>
<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>

- Priyanka Choudhary

Answer 4

你的代码存在一些错误，例如css.("display")不是JQuery中的任何函数。

你可以使用以下任何一种方法来解决问题：

$(function(){

$('.button').on("click",function(){

var item = $(this).next("div").next('.item'); // For second next
 //var item = $(this).siblings('.item'); // By siblings() function
//var item = $(this).next().closest('.item'); // By siblings() function
item.toggle();
});

});

- A.D.

Answer 5

你需要使用$(this).parent().find(":not(.button)")，这样可以切换容器内除按钮以外的所有内容：

$(document).ready(function() {
  $('.button').click(function() {
    $(this).parent().find(":not(.button)").toggle();
  });
});

.front,
.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>

- Milan Chheda

Answer 6

您可以直接触发.toggle()、.slideToggle()或.fadeToggle()函数，而无需检查可见性。根据您的HTML和原始JS代码，我建议使用.siblings('.item').first()来查找适当的元素。

$('.button').click(function() {
  let item = $(this).siblings('.item').first();
  item.slideToggle();
});

.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 hidden">
    This is a paragraph with little content. This is another small paragraph.
  </div>
</div>

- JasonB

Answer 7

使用 toggle。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("div.item").toggle(1000);
    });
});
</script>
<style>.item {
  display: none;
 }</style>
</head>
<body>

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

</body>
</html>

- Nims Patel

Answer 8

jQuery 剂毒，纯JavaScript 才耐用。

document.querySelector('button.button').onclick = function() {
    let item = document.querySelector('div.item');
    (getComputedStyle(item).display === 'none') ? item.style.display = 'block' : item.style.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>

- FFish

---

这似乎是没有人提出的事情，问题被标记为jquery。 - undefined

Answer 9

你可以使用jQuery的toggle方法来切换垃圾。

setInterval(()=>$("h1").toggle(), 50);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>hello</h1>

- I wrestled a bear once.