jquery를 클릭하면 상위 요소가 사라지게 됩니다.

JQuery는 HTML 문서를 조작하고 이벤트를 처리하는 간단하고 쉬운 방법을 제공하는 널리 사용되는 Javascript 라이브러리입니다. 웹 개발에서는 요소를 클릭하여 상위 요소를 사라지게 하는 기능을 구현해야 하는 경우가 있습니다. 이 기사에서는 JQuery를 사용하여 이 기능을 구현하는 방법을 소개합니다.

1. HTML 구조

먼저 상위 요소와 하위 요소를 포함한 HTML 구조를 정의해야 합니다. 코드는 다음과 같습니다.

<div class="parent">
  <div class="child"></div>
</div>

2. CSS 스타일

페이지를 더욱 아름답게 만들기 위해 몇 가지 CSS 스타일을 정의해야 합니다. 그 중 상위 요소는 상대 위치로 설정되어야 하고, 하위 요소는 절대 위치로 설정되어야 하며, 왼쪽 상단의 위치는 0으로 설정되어야 합니다. 코드는 다음과 같습니다.

.parent{
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #eee;
}

.child{
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: #ccc;
}

3. JQuery 코드

이제 부모 요소를 사라지게 하는 클릭 기능을 구현하는 JQuery 코드를 작성해야 합니다.

먼저 JQuery 선택기를 사용하여 상위 요소와 하위 요소를 선택하고 CSS를 통해 하위 요소가 중앙에 오도록 설정해야 합니다. 코드는 다음과 같습니다.

$(document).ready(function(){
  $(".child").css("margin", "auto");
});

다음으로 JQuery의 click() 함수를 사용하여 페이지 클릭 이벤트를 수신하고, 클릭 이벤트가 발생하면 fadeOut() 함수를 사용하여 상위 요소를 사라지게 만듭니다. 코드는 다음과 같습니다.

$(document).ready(function(){
  $(".child").css("margin", "auto");
  
  $(".parent").click(function(){
    $(this).fadeOut();
  });
});

4. 전체 코드

마지막으로 전체 코드는 다음과 같습니다.

HTML 코드:

<div class="parent">
  <div class="child"></div>
</div>

CSS 코드:

.parent{
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: #eee;
}

.child{
  position: absolute;
  top: 0;
  left: 0;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  margin: auto;
}

JQuery 코드:

$(document).ready(function(){
  $(".parent").click(function(){
    $(this).fadeOut();
  });
});

5. 요약

Through 위의 단계를 통해 성공했습니다. 상위 요소를 클릭하면 사라지는 기능을 구현합니다. 독자들은 이미 JQuery의 기본 사용법과 JQuery를 사용하여 특정 페이지 기능을 구현하는 방법을 이해하고 있다고 생각합니다. 동시에 독자는 이러한 기반을 더욱 확장하여 웹 개발 기술을 강화할 수도 있습니다.

위 내용은 jquery를 클릭하면 상위 요소가 사라지게 됩니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!