어떻게 누르면div를 숨기고 표시합니까

div를 숨기고 표시하려면 누르십시오:
많은 경우에 이런 요구가 있다. 즉,div를 클릭하면 표시되는div를 표시하고, 다시 클릭하면 표시되는div를 숨기는 것이다.예를 들어 사이트 백엔드에 글을 추가할 때 사용자의 필요에 따라 추가 정보를 추가할지 여부를 선택할 때가 있다.다음은 이 효과를 어떻게 실현하는지 간단하게 소개한다.
클릭한div를 숨기고 표시하는 방법은 여러 가지가 있는데 다음은 비교적 자주 사용하는 방법입니다.
toggle () 방법을 사용하여 div를 숨기고 표시합니다. 코드 실례는 다음과 같습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>    </title>
<style type="text/css">
body{
  color:#666;
  font-family:Verdana, Geneva, sans-serif;
  font-size:12px;
}
.msgtable th{
  background: url(mytest/jQuery/table_th_bg.gif) repeat-x bottom;
}
.msgtable td{
  padding:0.4em;
  border-bottom:1px solid #F3F3F3;
}
.input{
  padding:0px 3px;
  border:1px solid #d1d1d1;
  background:url(mytest/jQuery/input_bg.jpg) repeat-x;
  height:18px;
  line-height:18px;
  font-size:12px;
  color:#999;
}
.up-01{
  background: url(mytest/jQuery/top_ico1.gif) no-repeat 0 center;
}
.up-02{
  background: url(mytest/jQuery/top_ico2.gif) no-repeat 0 center;
}
.up-01, .up-02{
  display:block;
  float:right;
  padding-left:20px;
  cursor:pointer;
  line-height:17px;
}
.hide{display: none;}
.textarea {
  padding:3px;
  border:1px solid #d1d1d1;
  background:url(mytest/jQuery/input_bg.jpg) repeat-x;
  font-size:12px;
  color:#999;
}
.w250{width:250px;}
.w380{width:380px;}
.wh380{
  width:380px;
  height:50px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("#upordown").toggle(function(){ 
    $(this).text("      "); 
    $(this).removeClass(); 
    $(this).addClass("up-01");  
    $(".upordown").show(); 
  },function(){ 
    $(this).text("      "); 
    $(this).removeClass(); 
    $(this).addClass("up-02"); 
    $(".upordown").hide();  
  })   
}) 
</script>
</head>
<body>
<table width="650" border="0" cellspacing="0" cellpadding="0" class="msgtable">
  <tr>
    <th colspan="2" align="left">    </th>
  </tr>
  <tr>
    <td width="15%" align="right">    ：</td>
    <td width="85%"><input type="text" class="input w380" /></td>
  </tr>
  <tr>
    <td align="right">    ：</td>
    <td><input type="text" class="input w250" /></td>
  </tr>
  <tr>
    <td align="right">    ：</td>
    <td><input type="text" class="input w250" />
      <span id="upordown" class="up-02">      </span></td>
  </tr>
  <tr class="upordown hide">
    <td align="right">Meta   ：</td>
    <td><input type="text" class="input w250" /></td>
  </tr>
  <tr class="upordown hide">
    <td align="right">Meta  ：</td>
    <td><textarea class="textarea wh380"></textarea></td>
  </tr>
  <tr class="upordown hide">
    <td align="right">    ：</td>
    <td><textarea class="textarea wh380"></textarea></td>
  </tr>
</table>
</body>
</html>

위 코드는 백엔드에서 글을 추가할 때 흔히 볼 수 있는 기능으로toggle () 방법을 사용하여span 요소를 눌렀을 때toggle () 방법의 두 함수를 전환합니다.두 함수는span의 텍스트와span 요소의 배경 그림을 바꾸고class가upordown인 줄을 숨기고 표시하는 데 사용됩니다.
원래 주소:http://www.51texiao.cn/javascriptjiaocheng/2015/0428/326.html
원래 주소는 다음과 같습니다.http://www.softwhy.com/

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

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

🧙🏼 HTML 구조를 나타내는 요소

: 컨텐츠 분할 요소 : 블록 레벨 요소 : 플로우 콘텐츠를 위한 통용 컨테이너 (순수 컨테이너로서 아무것도 표현안함) : 인라인 컨테이너 : 인라인 레벨 요소 🌵 span (인라인 요소) vs div(블록 요소) ...

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

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

어떻게 누르면div를 숨기고 표시합니까

좋은 웹페이지 즐겨찾기