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">
Nie znaleziono powiązanych wyników
Zaproszony:
Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się
8 odpowiedzi
Anonimowy użytkownik
Potwierdzenie od:
Czysty JavaScript
:
OBEJRZYJ DEMO
http://jsfiddle.net/andrewwhitaker/hefGK/
-WERSJA
>
jQuery
:
OBEJRZYJ DEMO
http://jsfiddle.net/andrewwhitaker/KpFRb/
-WERSJA
>
Anonimowy użytkownik
Potwierdzenie od:
Przełącznik jQuery
http://api.jquery.com/toggle/
HTML
:
jQuery
:
Dla jQuery 1.7 i nowszych zastosowań
Aby uzyskać odniesienie, sprawdź to
demonstracja
http://jsfiddle.net/vVsAn/1/
Anonimowy użytkownik
Potwierdzenie od:
Przełącznik JavaScript
<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">
<pre class="snippet-code-css lang-css prettyprint-override">
<pre class="snippet-code-html lang-html prettyprint-override">
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 >
<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">
<pre class="snippet-code-css lang-css prettyprint-override">
<pre class="snippet-code-html lang-html prettyprint-override">
Przełącznik jQuery
>
<sup>
Dokumenty
</sup>http://api.jquery.com/toggle/
;
<sup>
Dokumenty
</sup>
http://api.jquery.com/fadetoggle/
;
<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">
<pre class="snippet-code-css lang-css prettyprint-override">
<pre class="snippet-code-html lang-html prettyprint-override">
jQuery-Toggle
<sup>
Docs
</sup>http://api.jquery.com/toggleclass/
>
przełącza <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">
<pre class="snippet-code-css lang-css prettyprint-override">
<pre class="snippet-code-html lang-html prettyprint-override">
Przełączanie HTML5 z i >
(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">
Przełączanie HTML z >
<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">
<pre class="snippet-code-html lang-html prettyprint-override">
Przełączanie HTML z >
<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">
<pre class="snippet-code-html lang-html prettyprint-override">
Przełącz CSS za pomocą >
(ż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">
<pre class="snippet-code-html lang-html prettyprint-override">
Animacja przejścia klas
>
Jeśli wybierzesz jeden ze sposobów JS/jQuery, aby faktycznie zmienić , 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">
<pre class="snippet-code-css lang-css prettyprint-override">
<pre class="snippet-code-html lang-html prettyprint-override">
Anonimowy użytkownik
Potwierdzenie od:
Anonimowy użytkownik
Potwierdzenie od:
<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">
<pre class="snippet-code-html lang-html prettyprint-override">
Anonimowy użytkownik
Potwierdzenie od:
Anonimowy użytkownik
Potwierdzenie od:
Również html
Anonimowy użytkownik
Potwierdzenie od: