jqueryクリックして親要素を非表示にします

JQuery は、HTML ドキュメントを操作してイベントを処理するためのシンプルで使いやすい方法を提供する、広く使用されている Javascript ライブラリです。 Web 開発では、要素をクリックして親要素を非表示にする機能を実装する必要がある場合があります。この記事では、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. まとめ

以上の手順で、クリックして親要素を消す機能を実装することができました。読者はすでに JQuery の基本的な使用法と、JQuery を使用して特定のページ関数を実装する方法を理解していると思います。同時に、読者はこれをさらに拡張して Web 開発スキルを強化することもできます。

以上がjqueryクリックして親要素を非表示にしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。