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

【问题标题】：How to toggle display:none, display:block如何切换显示：无，显示：块
【发布时间】：2018-06-27 02:30:34
【问题描述】：

$(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。这里的代码似乎不起作用。

【问题讨论】：

您的代码存在各种问题....closest('') 仅搜索父节点，因此它实际上不会返回任何内容。此外，您的 closest('.item') 缺少 . 以表示它是它正在寻找的类。
您还缺少一个 jquery 调用的函数名称 ($)...
由于您使用的是 jQuery，您可能只想使用方法 toggle() api.jquery.com/toggle
你不需要hide/show 和css。你认为hide 和show 有什么其他改变 CSS 的？

标签： jquery html css

【解决方案1】：

<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>

【讨论】：

【解决方案2】：

使用.siblings()

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

工作 sn-p：-

$(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>

【讨论】：

【解决方案3】：

使用切换

<!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>

【讨论】：

【解决方案4】：

您的代码有一些错误，例如 css.("display") is not any function like in 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();
});

});

【讨论】：

【解决方案5】：

您可以只触发.toggle()、.slideToggle() 或.fadeToggle() 函数而不是检查可见性，我会使用.siblings('.item').first() 根据您的html 和原始js 代码查找适当的元素。

$('.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>

【讨论】：

【解决方案6】：

使用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>

【讨论】：

【解决方案7】：

您需要使用$(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>

【讨论】：

【解决方案8】：

您可以使用 jquery 切换方法来切换垃圾。

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

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

【讨论】：