jquery點擊讓父元素消失-前端問答-PHP中文網

jquery點擊讓父元素消失

WBOY

發布： 2023-05-28 14:08:40

原創

676 人瀏覽過

JQuery是一種廣泛使用的Javascript函式庫，它提供了一種簡單易用的方式來操作HTML文件和處理事件。在網路開發中，有時候需要實作點擊某個元素，讓其父元素消失的功能。本文將介紹如何使用JQuery實現這項功能。

一、HTML結構

首先，我們需要先定義一個HTML結構，包含一個父元素和一個子元素。程式碼如下：

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

登入後複製

二、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;
}

登入後複製

三、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();
  });
});

登入後複製

四、完整程式碼

最終，完整程式碼如下：

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();
  });
});

登入後複製

五、總結

透過以上步驟，我們已經成功地實現了點擊讓父元素消失的功能。相信讀者們已經了解JQuery的基本用法，以及如何使用JQuery實現某些頁面功能。同時，讀者們也可以在此基礎上進一步擴展，加強自己的Web開發技能。

以上是jquery點擊讓父元素消失的詳細內容。更多資訊請關注PHP中文網其他相關文章！