[JQUERY] 토글 쇼 / 버튼 숨기기 DIV?

토글 쇼 / 버튼 숨기기 DIV?

해결법

1. ---

   1.jQuery를 전환 봐

   jQuery를 전환 봐

   HTML :

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

   jQuery를 :

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

   jQuery를 1.7 및 최신 사용 버전

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

   참고로, 친절이 데모를 확인

2. ---

   2.순수 자바 스크립트 :

   순수 자바 스크립트 :

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

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

   SEE DEMO

3. ---

   3.VAR 토글 = document.getElementById를 ( "토글"); VAR 내용은 document.getElementById를 ( "내용") =; toggle.addEventListener ({) (함수를 "클릭" content.style.display = (^ = 1 content.dataset.toggled)? "블록": "없음"; }); #함유량{ 표시 : 없음; } TOGGLE < "토글"버튼 식>

   일부 콘텐츠 ...

   VAR 토글 = document.getElementById를 ( "토글"); VAR 내용은 document.getElementById를 ( "내용") =; toggle.addEventListener ({) (함수를 "클릭" content.style.display = (^ = 1 content.dataset.toggled)? "블록": "없음"; }); #함유량{ 표시 : 없음; } TOGGLE < "토글"버튼 식>

   일부 콘텐츠 ...

   소개 ^ 비트 XOR과 같은 I / O toggler https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

   VAR 토글 = document.getElementById를 ( "토글"); VAR 내용은 document.getElementById를 ( "내용") =; toggle.addEventListener ({) (함수를 "클릭" content.classList.toggle ( "표시"); }); #함유량{ 표시 : 없음; } # content.show { 표시 : 블록; / * P.S :! 사용`important`없는`#의 content` 블록 (선택 특이성)의 경우. * / } TOGGLE < "토글"버튼 식>

   일부 콘텐츠 ...

   $ ( "# 토글"). (함수를 "클릭"에 () { $ ( "# 내용") 토글 ().; // .fadeToggle () // .slideToggle () }); #함유량{ 표시 : 없음; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> TOGGLE < "토글"버튼 식>

   일부 콘텐츠 ...

   .toggle ()는 요소의 디스플레이 "블록"/ "없음"의 값을 토글

   $ ( "# 토글"). (함수를 "클릭"에 () { $ ( "# 내용") toggleClass ( "쇼."); }); #함유량{ 표시 : 없음; } # content.show { 표시 : 블록; / * P.S :! 사용`important`없는`#의 content` 블록 (선택 특이성)의 경우. * / } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> TOGGLE < "토글"버튼 식>

   일부 콘텐츠 ...

   (IE와 오페라 미니에 지원되지 않는)

   <세부 정보> <요약> TOGGLE

   일부 콘텐츠 ...

   [ID = ^ 토글] [ID = ^ 토글] + * { 표시 : 없음; } [ID = ^ 토글] 체크 + * { 표시 : 블록; } < "토글 1"= 레이블> TOGGLE <입력 ID = "1 토글"TYPE = "체크 박스">

   일부 콘텐츠 ...

   [ID = ^ 스위치, [ID = ^ 스위치] + * { 표시 : 없음; } [ID = ^ 스위치] 체크 + * { 표시 : 블록; } <= 레이블 "스위치 1"> SHOW 1 <= 레이블 "스위치 2"> SHOW 2 <입력 ID = "1 스위치"TYPE = "라디오"NAME = "TOG">

   1 Merol Muspi ... <입력 ID = "2 스위치"TYPE = "라디오"NAME = "TOG">

   2 로렘 입숨 ...

   (다만 당신이 당신의 무기고에서 그것을 가지고 있는지 확인하기 위해)

   [ID = ^ 스위치] + * { 표시 : 없음; } [ID = ^ 스위치] 목표 + * { 표시 : 블록; } 1 를 보여 2 를보기

   1 Merol Muspi ...

   2 로렘 입숨 ...

   당신은 클래스 명 토글 사실에 JS / jQuery를 방법 중 하나를 선택하면, 당신은 항상 여기에 기본 예제, 당신의 요소에 애니메이션 전환 효과를 추가 할 수 있습니다 :

   VAR 토글 = document.getElementById를 ( "토글"); VAR 내용은 document.getElementById를 ( "내용") =; toggle.addEventListener ({) (함수를 "클릭" content.classList.toggle ( "표시"); } 거짓); #함유량{ / * DO NOT USE 디스플레이 NONE / BLOCK! 대신 : * / 배경 : # CF5; 패딩 : 10px; 위치 : 절대; 가시성 : 숨겨진; 불투명도 : 0; 전환 : 0.6s; -webkit 전이 : 0.6s; 변환 : translateX (-100 %)을; -webkit-변환 : translateX (-100 %)을; } # content.appear { 가시성 : 보이는; 불투명도 : 1; 변환 : translateX (0); -webkit는 변환 형 : translateX (0); } TOGGLE < "토글"버튼 식>

   일부 Togglable 내용 ...

4. ---

   4.여기 전환을하는 일반 자바 스크립트 방법이있다 :

   여기 전환을하는 일반 자바 스크립트 방법이있다 :

   <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();">
   

5. ---

   5.불투명 시도

   불투명 시도

   DIV {전환 : 모든 0.4s 쉽게} .hide {불투명도 : 0; }

   안녕하세요.

6. ---

   6.내가 숨기고 클래스를 사용하여 내용을 표시하는 방법이다. 아무것도 클래스를 변경하는 것은 A가 유료로 디스플레이에 표시 할 클래스를 변경 블록 표시를 변경한다.

   내가 숨기고 클래스를 사용하여 내용을 표시하는 방법이다. 아무것도 클래스를 변경하는 것은 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>
   

7. ---

   7.

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

   그리고 HTML

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

8. ---

   8.다음을 사용할 수 있습니다 :

   다음을 사용할 수 있습니다 :

   === mydiv.style.display '블록'= (mydiv.style.display === '블록'없음 '?'블록 ');

from https://stackoverflow.com/questions/4528085/toggle-show-hide-div-with-button by cc-by-sa and MIT license