Javascript 用按钮切换显示/隐藏 div？

toggle show/hide div with button?

提问by user547794

Hopefully this is an easy question. I have a divthat I want to toggle hidden/shown with a button

希望这是一个简单的问题。我有一个div我想用按钮切换隐藏/显示

<div id="newpost">

采纳答案by Naveed

Look at jQuery Toggle

看看jQuery 切换

HTML:

HTML：

<div id='content'>Hello World</div>
<input type='button' id='hideshow' value='hide/show'>

jQuery:

jQuery：

jQuery(document).ready(function(){
    jQuery('#hideshow').live('click', function(event) {        
         jQuery('#content').toggle('show');
    });
});

For versions of jQuery 1.7 and newer use

对于 jQuery 1.7 及更新版本使用

jQuery(document).ready(function(){
    jQuery('#hideshow').on('click', function(event) {        
        jQuery('#content').toggle('show');
    });
});

For reference, kindly check this demo

作为参考，请查看此演示

回答by Andrew Whitaker

Pure JavaScript:

纯 JavaScript：

var button = document.getElementById('button'); // Assumes element with id='button'

button.onclick = function() {
    var div = document.getElementById('newpost');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }
};

SEE DEMO

看演示

jQuery:

jQuery：

$("#button").click(function() { 
    // assumes element with id='button'
    $("#newpost").toggle();
});

SEE DEMO

看演示

回答by Roko C. Buljan

JavaScript - Toggle Element.style^MDN

JavaScript - 切换Element.style^MDN

var toggle  = document.getElementById("toggle");
var content = document.getElementById("content");

toggle.addEventListener("click", function() {
  content.style.display = (content.dataset.toggled ^= 1) ? "block" : "none";
});

#content{
  display:none;
}

<button id="toggle">TOGGLE</button>
<div id="content">Some content...</div>

About the ^bitwise XOR as I/O toggler
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

关于^按位异或作为 I/O 切换器
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

JavaScript - Toggle .classList.toggle()

JavaScript - 切换 .classList.toggle()

var toggle  = document.getElementById("toggle");
var content = document.getElementById("content");

toggle.addEventListener("click", function() {
  content.classList.toggle("show");
});

#content{
  display:none;
}
#content.show{
  display:block; /* P.S: Use `!important` if missing `#content` (selector specificity). */
}

<button id="toggle">TOGGLE</button>
<div id="content">Some content...</div>

jQuery - Toggle

jQuery - 切换

.toggle()^Docs; .fadeToggle()^Docs; .slideToggle()^Docs

.toggle()^文档； .fadeToggle()^文档；.slideToggle()^文档

$("#toggle").on("click", function(){
  $("#content").toggle();                 // .fadeToggle() // .slideToggle()
});

#content{
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">TOGGLE</button>
<div id="content">Some content...</div>

jQuery - Toggle .toggleClass()^Docs

jQuery - 切换.toggleClass()^文档

.toggle()toggles an element's display"block"/"none"values

.toggle()切换元素的display"block"/"none"值

$("#toggle").on("click", function(){
  $("#content").toggleClass("show");
});

#content{
  display:none;
}
#content.show{
  display:block; /* P.S: Use `!important` if missing `#content` (selector specificity). */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">TOGGLE</button>
<div id="content">Some content...</div>

HTML5 - Toggle using <summary>and <details>

HTML5 - 使用<summary>和切换<details>

(unsupported on IE and Opera Mini)

（在 IE 和 Opera Mini 上不受支持）

<details>
  <summary>TOGGLE</summary>
  <p>Some content...</p>
</details>

HTML - Toggle using checkbox

HTML - 切换使用 checkbox

[id^=toggle],
[id^=toggle] + *{
  display:none;
}
[id^=toggle]:checked + *{
  display:block;
}

<label for="toggle-1">TOGGLE</label>

<input id="toggle-1" type="checkbox">
<div>Some content...</div>

HTML - Switch using radio

HTML - 切换使用 radio

[id^=switch],
[id^=switch] + *{
  display:none;
}
[id^=switch]:checked + *{
  display:block;
}

<label for="switch-1">SHOW 1</label>
<label for="switch-2">SHOW 2</label>

<input id="switch-1" type="radio" name="tog">
<div>1 Merol Muspi...</div>

<input id="switch-2" type="radio" name="tog">
<div>2 Lorem Ipsum...</div>

CSS - Switch using :target

CSS - 切换使用 :target

(just to make sure you have it in your arsenal)

（只是为了确保你的武器库中有它）

[id^=switch] + *{
  display:none;
}
[id^=switch]:target + *{
  display:block;
}

<a href="#switch1">SHOW 1</a>
<a href="#switch2">SHOW 2</a>

<i id="switch1"></i>
<div>1 Merol Muspi ...</div>

<i id="switch2"></i>
<div>2 Lorem Ipsum...</div>

---

---

Animating class transition

动画类过渡

If you pick one of JS / jQuery way to actually toggle a className, you can always add animated transitions to your element, here's a basic example:

如果您选择一种 JS / jQuery 方式来实际切换 a className，则始终可以向元素添加动画过渡，这是一个基本示例：

var toggle  = document.getElementById("toggle");
var content = document.getElementById("content");

toggle.addEventListener("click", function(){
  content.classList.toggle("appear");
}, false);

#content{
  /* DON'T USE DISPLAY NONE/BLOCK! Instead: */
  background: #cf5;
  padding: 10px;
  position: absolute;
  visibility: hidden;
  opacity: 0;
          transition: 0.6s;
  -webkit-transition: 0.6s;
          transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}
#content.appear{
  visibility: visible;
  opacity: 1;
          transform: translateX(0);
  -webkit-transform: translateX(0);
}

<button id="toggle">TOGGLE</button>
<div id="content">Some Togglable content...</div>

回答by Jeff the Bear

Here's a plain Javascript way of doing toggle:

这是一种简单的 Javascript 切换方式：

<script>
  var toggle = function() {
  var mydiv = document.getElementById('newpost');
  if (mydiv.style.display === 'block' || mydiv.style.display === '')
    mydiv.style.display = 'none';
  else
    mydiv.style.display = 'block'
  }
</script>

<div id="newpost">asdf</div>
<input type="button" value="btn" onclick="toggle();">

回答by Kamil Kie?czewski

Try with opacity

尝试不透明度

div { transition: all 0.4s ease }
.hide { opacity: 0; }

<input onclick="newpost.classList.toggle('hide')" type="button" value="toggle">

<div id="newpost">Hello</div>

回答by Edwin Martin

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#hideshow').click(function(){
    $('#content').toggle('show');
  });
});
</script>

And the html

和 html

<div id='content'>Hello World</div>
<input type='button' id='hideshow' value='hide/show'>

回答by Shawn Baldwin

This is how I hide and show content using a class. changing the class to nothing will change the display to block, changing the class to 'a' will show the display as none.

这就是我使用类隐藏和显示内容的方式。将类更改为无会将显示更改为阻止，将类更改为“a”将显示为无。

<!DOCTYPE html>
<html>
<head>
<style>
body  {
  background-color:#777777;
  }
block1{
  display:block; background-color:black; color:white; padding:20px; margin:20px;
  }
block1.a{
  display:none; background-color:black; color:white; padding:20px; margin:20px;
  }
</style>
</head>
<body>
<button onclick="document.getElementById('ID').setAttribute('class', '');">Open</button>
<button onclick="document.getElementById('ID').setAttribute('class', 'a');">Close</button>
<block1 id="ID" class="a">
<p>Testing</p>
</block1>
</body>
</html>

回答by morski

You could use the following:

您可以使用以下内容：

mydiv.style.display === 'block' = (mydiv.style.display === 'block' ? 'none' : 'block');

mydiv.style.display === 'block' = (mydiv.style.display === 'block' ? 'none' : 'block');