이것은 jQuery 초보자를 위한 것입니다.

요소를 표시하거나 숨기기 위해 미끄러짐

원소만 표시하는 게 아니라 좀 동적으로 하면 안 돼요?
jQuery에서 ".animate ()"요소를 이동할 수 있는 함수가 있습니다.
더 간단한 함수 ".slideDown ()", ".slideUp ()"이 있습니다.
우선 다음 코드를 준비하세요.
slide.html

<!-- jQuery導入 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<!-- デザイン定義 -->
<style type="text/css">
.slide-div {
  width: 100px;
  text-align: center;
  border: #000 2px solid;
  padding: 10px;
  display: none;
}
</style>

<!-- 要素定義 -->
<p><button>開く</button></p>
<div class="slide-div">こんにちは</div>

<!-- jQuery定義 -->
<script type="text/javascript">
$(document).ready(function() {
  $(document).on("click", "button", function() {
    $(".slide-div").slideDown();
  });
});
</script>

이렇게 되면'열기'라고 적힌 버튼만 볼 수 있을 것 같다.

"안녕하세요"어디 갔어요?
왜?
디자인을 정의하는 곳은'display:none'이다.에서 설명한 대로 해당 매개변수의 값을 수정합니다.
그럼 버튼을 눌러주세요.

자꾸 위에서 아래로 이동하면서 검은색 사각이 생기는 것 같아.
우리 이것을 좀 더 응용합시다.
처음 단추를 "열기"에서 누르면 "닫기"로 바뀝니다.
'닫기'를 누르면'안녕하세요'는 사라집니다.
코드 작성:.
slide.html

<script type="text/javascript">
$(document).ready(function() {
  $(document).on("click", "button", function() {
    if ( $(".slide-div").css("display") == "none" ) {
      $("button").text("閉じる");
      $(".slide-div").slideDown();
    } else {
      $("button").text("開く");
      $(".slide-div").slideUp();
    }
  });
});
</script>

".slide-div"의.css("display")가 "none"인 경우
"button"의 내용을 "닫기"로 변경하고, ".slide-div"를 ".slideDown () 으로 변경합니다.
반대로else의 경우'button'의 내용을'열기'로 되돌리고'.slide-div'를'.slide Up ()'으로 되돌려줍니다.
여기서'.slideDown()'은 요소를 표시하고'.slideUp()'은 숨깁니다.
나는'.text()'를 사용했다고 생각한다. 이외에도'.html()'라는 함수도 있다.
여기에 HTML 태그를 쓸 수 있습니다.".text ()"는 텍스트만 쓸 수 있습니다.