Porównaj ceny domen i usług IT, sprzedawców z całego świata

przełączyć Pokaż/Ukryj div za pomocą przycisku?


Mam nadzieję, że to proste pytanie. Mam
div
, który chcę przełączyć ukryty/pokazany za pomocą przycisku
<div id="newpost">

Zaproszony:
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:


Czysty 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';
}
};

OBEJRZYJ DEMO
http://jsfiddle.net/andrewwhitaker/hefGK/
-WERSJA
>

jQuery

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

OBEJRZYJ DEMO
http://jsfiddle.net/andrewwhitaker/KpFRb/
-WERSJA
>
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Patrzeć na

Przełącznik jQuery
http://api.jquery.com/toggle/

HTML

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


jQuery

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

Dla jQuery 1.7 i nowszych zastosowań
jQuery(document).ready(function(){
jQuery('#hideshow').on('click', function(event) {
jQuery('#content').toggle('show');
});
});

Aby uzyskać odniesienie, sprawdź to
demonstracja
http://jsfiddle.net/vVsAn/1/
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:


Przełącznik JavaScript
Element.style

<sup>
MDN
</sup>https://developer.mozilla.org/ ... style
>
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="false" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">
var toggle = document.getElementById("toggle");
var content = document.getElementById("content");toggle.addEventListener("click", function() {
content.style.display = (content.dataset.toggled ^= 1) ? "block" : "none";
});

<pre class="snippet-code-css lang-css prettyprint-override">
#content{
display:none;
}

<pre class="snippet-code-html lang-html prettyprint-override">
<button id="toggle">TOGGLE</button>
<div id="content">Some content...

O
^
XOR bitowy przełącznik I/O
https://stackoverflow.com/a/22061240/383904
https://developer.mozilla.org/ ... taset
https://developer.mozilla.org/ ... taset

Przełączanie JavaScript
.classList.toggle ()
>
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="false" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">
var toggle = document.getElementById("toggle");
var content = document.getElementById("content");toggle.addEventListener("click", function() {
content.classList.toggle("show");
});

<pre class="snippet-code-css lang-css prettyprint-override">
#content{
display:none;
}
#content.show{
display:block;/* P.S: Use `!important` if missing `#content` (selector specificity). */
}

<pre class="snippet-code-html lang-html prettyprint-override">
<button id="toggle">TOGGLE</button>
<div id="content">Some content...


Przełącznik jQuery
>
.toggle()

<sup>
Dokumenty
</sup>http://api.jquery.com/toggle/
;
<sup>
Dokumenty
</sup>
.fadeToggle()
http://api.jquery.com/fadetoggle/
;
.slideToggle()

<sup>
Dokumenty
</sup>http://api.jquery.com/slidetoggle/
>
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="false" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">
$("#toggle").on("click", function(){
$("#content").toggle();// .fadeToggle()// .slideToggle()
});

<pre class="snippet-code-css lang-css prettyprint-override">
#content{
display:none;
}

<pre class="snippet-code-html lang-html prettyprint-override">
<script src="[url=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>]https://ajax.googleapis.com/aj ... gt%3B[/url]
<button id="toggle">TOGGLE</button>
<div id="content">Some content...


jQuery-Toggle
.toggleClass()

<sup>
Docs
</sup>http://api.jquery.com/toggleclass/
>
.toggle ()
przełącza
wyświetlacz
"blok"/"brak"
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="false" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">
$("#toggle").on("click", function(){
$("#content").toggleClass("show");
});

<pre class="snippet-code-css lang-css prettyprint-override">
#content{
display:none;
}
#content.show{
display:block;/* P.S: Use `!important` if missing `#content` (selector specificity). */
}

<pre class="snippet-code-html lang-html prettyprint-override">
<script src="[url=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>]https://ajax.googleapis.com/aj ... gt%3B[/url]
<button id="toggle">TOGGLE</button>
<div id="content">Some content...


Przełączanie HTML5 z
& < summary & >
i
& < details & >
>
(nie obsługiwane w IE i Opera Mini)
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-html lang-html prettyprint-override">
<details>
<summary>TOGGLE</summary>
Some content...</details>


Przełączanie HTML z
checkbox
>
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="false" data-hide="false" data-lang="js">
<pre class="snippet-code-css lang-css prettyprint-override">
[id^=toggle],
[id^=toggle] + *{
display:none;
}
[id^=toggle]:checked + *{
display:block;
}

<pre class="snippet-code-html lang-html prettyprint-override">
<label for="toggle-1">TOGGLE</label><input id="toggle-1" type="checkbox">
<div>Some content...


Przełączanie HTML z
radio
>
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="false" data-hide="false" data-lang="js">
<pre class="snippet-code-css lang-css prettyprint-override">
[id^=switch],
[id^=switch] + *{
display:none;
}
[id^=switch]:checked + *{
display:block;
}

<pre class="snippet-code-html lang-html prettyprint-override">
<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...<input id="switch-2" type="radio" name="tog">
<div>2 Lorem Ipsum...


Przełącz CSS za pomocą
: target
>
(żeby upewnić się, że masz to w swoim arsenale)
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="false" data-hide="false" data-lang="js">
<pre class="snippet-code-css lang-css prettyprint-override">
[id^=switch] + *{
display:none;
}
[id^=switch]:target + *{
display:block;
}

<pre class="snippet-code-html lang-html prettyprint-override">
[url="#switch1">SHOW 1[/url]
[url="#switch2">SHOW 2[/url]<i id="switch1">[/i]
<div>1 Merol Muspi ...<i id="switch2">[/i]
<div>2 Lorem Ipsum...


Animacja przejścia klas
>
Jeśli wybierzesz jeden ze sposobów JS/jQuery, aby faktycznie zmienić
className
, zawsze możesz dodać animowane przejścia do swojego elementu, oto prosty przykład:
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="false" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">
var toggle = document.getElementById("toggle");
var content = document.getElementById("content");toggle.addEventListener("click", function(){
content.classList.toggle("appear");
}, false);

<pre class="snippet-code-css lang-css prettyprint-override">
#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);
}

<pre class="snippet-code-html lang-html prettyprint-override">
<button id="toggle">TOGGLE</button>
<div id="content">Some Togglable content...
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Oto prosty sposób na zmianę w 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
<input type="button" value="btn" onclick="toggle();">
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Spróbuj z kryciem
<div class="snippet-code snippet-currently-hidden">
<div class="snippet" data-babel="false" data-console="true" data-hide="true" data-lang="js">
<pre class="snippet-code-css lang-css prettyprint-override">
div { transition: all 0.4s ease }.hide { opacity: 0; }

<pre class="snippet-code-html lang-html prettyprint-override">
<input onclick="newpost.classList.toggle('hide')" type="button" value="toggle"><div id="newpost">Hello
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

W ten sposób ukrywam i pokazuję zawartość za pomocą klasy. zmiana klasy nic nie zmieni Wyświetlana wartość BLOCK, zmiana klasy 'a' będzie wyświetlane na wyświetlaczu jak nikt inny.
<!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">
Testing</block1>
</body>
</html>
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

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

Również html
<div id='content'>Hello World
<input type='button' id='hideshow' value='hide/show'>
Anonimowy użytkownik

Anonimowy użytkownik

Potwierdzenie od:

Możesz użyć następujących:
mydiv.style.display === 'block' = (mydiv.style.display === 'block' ? 'none' : 'block');

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się