SeouliteLab

jQuery .toggle() 메서드 이해와 활용 예제 본문

프로그래밍

jQuery .toggle() 메서드 이해와 활용 예제

Seoulite Lab 2024. 4. 1. 08:56

jQuery의 .toggle() 메서드는 요소의 가시성을 전환합니다. 요소가 보이는 경우에는 숨기고, 숨겨진 경우에는 보이게 합니다. 이를 통해 간단한 토글 효과를 구현할 수 있습니다. .toggle() 메서드의 사용법과 예제를 살펴보겠습니다.

예제 1: 기본적인 요소의 토글

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .toggle() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>

<div id="box"></div>
<button id="toggleBtn">토글</button>

<script>
  $(document).ready(function() {
    $("#toggleBtn").click(function() {
      $("#box").toggle(); // 요소의 가시성을 전환하여 보이거나 숨김
    });
  });
</script>

</body>
</html>

위 코드에서는 버튼을 클릭하면 요소의 가시성을 전환하여 보이거나 숨깁니다.

예제 2: 다양한 효과와 함께 토글

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .toggle() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: green;
    }
  </style>
</head>
<body>

<div id="box"></div>
<button id="toggleBtn">토글</button>

<script>
  $(document).ready(function() {
    $("#toggleBtn").click(function() {
      $("#box").toggle("slow"); // 천천히 나타나거나 사라짐
    });
  });
</script>

</body>
</html>

위 코드에서는 버튼을 클릭하면 천천히 요소가 나타나거나 사라지는 효과와 함께 토글됩니다.

예제 3: 콜백 함수와 함께 토글

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .toggle() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>

<div id="box"></div>
<button id="toggleBtn">토글</button>

<script>
  $(document).ready(function() {
    $("#toggleBtn").click(function() {
      $("#box").toggle("slow", function() {
        alert("토글 완료!"); // 토글 완료 후 알림창 표시
      });
    });
  });
</script>

</body>
</html>

위 코드에서는 토글이 완료된 후에 콜백 함수를 실행하여 알림창을 표시합니다.

.toggle() 메서드는 요소의 가시성을 전환하여 보이거나 숨깁니다. 이 메서드를 사용하면 간단한 토글 효과를 구현할 수 있습니다. 옵션을 통해 다양한 효과를 적용하거나 콜백 함수를 실행할 수 있습니다.

위 예제들에서는 .toggle() 메서드를 사용하여 요소의 가시성을 전환하는 방법을 살펴보았습니다.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

파이썬의 ** 연산자: 딕셔너리 언패킹의 강력한 도구  (0) 2024.04.01
파이썬 Pydantic 라이브러리: 데이터 검증 및 설정을 위한 간편한 도구  (0) 2024.04.01
jQuery .stop() 메서드 이해와 활용 예제  (0) 2024.04.01
jQuery .slideUp() 메서드 이해와 활용 예제  (0) 2024.04.01
jQuery .slideToggle() 메서드 이해와 활용 예제  (0) 2024.04.01
'프로그래밍' Related Articles more