JQuery 점적 toggle

17710 단어 jquery

JQuery 점적 toggle
인용: http://www.cnblogs.com/UpThinking/archive/2009/11/16/1603588.html
오늘 이 JQuery 에 있 는 toggle 에 대해 몇 마디 이 야 기 를 나 누 었 습 니 다. 글 에 문제 가 있 습 니 다. 소 들 이 의혹 을 풀 어 주 셨 으 면 좋 겠 습 니 다.

        toggle(fn,fn,….)  ,                。

    ：             DIV   ，      ， DIV        ，          DIV

。

       HTML    ：

   1:  <body>

   2:  <input type="button" id="btnShow" value="Toggle"/>

   3:  <div id="DivToggle">      id "DivToggle"    </div>

   4:  </body>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
정 의 된 최초의 스타일 은 다음 과 같 습 니 다.

   1:  #DivToggle {

   2:      height: 150px;

   3:      width: 200px;

   4:      margin: 50px;

   5:      background-color: #6CC;

   6:  }

   1:      <script type="text/javascript">

   2:          $(

   3:          function() {

   4:          $("#btnShow").click(function(event) {

   5:                  $("#DivToggle").toggle();

   6:              });

   7:          }

   8:          );

   9:      </script>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
      단 추 를 누 른 후 DIV 를 숨 기 고 다시 DIV 를 누 르 면 표시 되 며 순환 합 니 다.
      요소 의 표시 와 숨 김 을 수 동 으로 설정 할 수 있 습 니 다. 표시: toggle (true);숨 기기: 토글 (false);
     우 리 는 또한 요소 의 숨 김 과 표시 설정 속 도 를 설정 할 수 있다.

   1:   $("#DivToggle").toggle(600);

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

     물론 여기 서 우 리 는 우리 가 웹 페이지 에서 자주 만 나 는 마 우 스 를 위로 옮 겨 표시 한 후에 마 우 스 를 옮 기 면 숨겨 지 는 효 과 를 생각 할 수 있다.
     여기 에는 당연히 hover (fnover, fnout) 사건 이 사용 되 었 다.우 리 는 fnover 와 fnout 을 이상 의 toggle (600) 로 설정 하면 됩 니 다.
     여기 fnover 는 마우스 로 이동 하 는 이벤트 함수 이 고 fnout 은 마우스 로 이동 하 는 이벤트 함수 입 니 다.
    우 리 는 toggle (600) 을 하나의 함수 로 따로 설정 하여 호출 할 것 입 니 다. 이렇게 하면 비교적 읽 기 쉬 워 보 입 니 다.

   1:      <script type="text/javascript">

   2:          $(

3:

   4:          function(event) {

   5:              $("#btnShow").hover(OverOut, OverOut);

   6:              function OverOut(event) {

   7:                  $("#DivToggle").toggle(600);

   8:              }

   9:          }

  10:          );

  11:      </script>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
이렇게 해서 우 리 는 마 우 스 를 단추 위로 이동 한 후에 옮 기 면 DivToggle 의 숨 김 과 표시 효 과 를 볼 수 있다.
toggle (fn, fn,...) 을 보 여주 기 위해 서 는 위 에 있 는 함 수 를 사용 한 다음 btnShow 를 사용 한 Click 이 벤트 를 추가 하여 DIV 를 표시 하 는 스타일 을 숨 긴 다음 이 표 의 DIV 스타일 을 추가 합 니 다.
숨겨 진 코드 를 표시 하면 이렇게 할 수 있 습 니 다.

   1:      <script type="text/javascript">

   2:          $(

   3:          function(event) {

   4:              function OverOut(event) {

   5:                  $("#DivToggle").toggle(600);

   6:              }

   7:              $("#DivToggle").toggle(function() {

   8:                  $("#btnShow").click(OverOut);

   9:              }, function() {

  10:                  $("#btnShow").click(OverOut);

  11:              });

  12:          }

  13:          );

  14:      </script>

                  ，  toggle(fn,fn,…)           Click  ，           toggle

       。           。     。        。

         toggle             ，      ，   Div    。

   1:      <script type="text/javascript">

   2:          $(

   3:          function(event) {

   4:              function OverOut(event) {

   5:                  $("#DivToggle").toggle(600);

   6:              }

   7:              $("#DivToggle").toggle(function() {

   8:                  $(this).click(function() { $(this).css("background", "Blue"); });

   9:              }, function(event) {

  10:                  $(this).click(function() { $(this).css("background", "Green"); });

  11:              });

  12:          }

  13:          );

  14:      </script>

   1:      <script type="text/javascript">

   2:          $(

   3:          function(event) {

4:

   5:              function OverOut(event) {

   6:                  $("#DivToggle").toggle(600);

   7:              }

8:

   9:              $("#btnShow").toggle(

  10:                 OverOut, OverOut,

  11:                 function() { $("#DivToggle").css({ "background": "Green" }); },

  12:                 function() { $("#DivToggle").css({ "background": "Blue" }); }

  13:              );

14:

  15:          }

  16:          );

  17:      </script>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

jQuery 전후 예

이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

unusable index and invisible index의 차이점

gridster 플러그 인 상세 설명

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다