質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

特定の要素外をクリックすることで処理を発動させる時、対象となる要素を複数指定したい。

darekatasukete
darekatasukete

総合スコア2

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0グッド

0クリップ

342閲覧

投稿2022/11/17 11:26

前提・実現したいこと

とあるランディングページの模写をしており、調べてもわからない箇所があるためご教授賜りたいです。

JavaScriptで下記のことを実装しようとしています。

・ヘッダー内のメニューボタンをクリックする→メニュー画面が開く
・開いたメニュー画面以外、かつヘッダー外の任意の場所をクリックする→メニュー画面が閉じる

発生している問題・エラーメッセージ

JavaScriptの理論演算子で、クリック位置が上記のどちらでもない場合を発動条件として指定したつもりです。 クリックファンクションにおいてclosest()で親要素を取得し、除外したい要素として'header'と、メニュー画面である'.hide-searchbox-a'を指定しました。 しかし、headerに対しては除外要素として反応するものの.hide-searchbox-aに対しては反応してくれません。

該当のソースコード

html

1<!doctype html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5 <title>AirBnb</title> 6 <link href="teststyle.css" rel="stylesheet" type="text/css"> 7 </head> 8 9 <body id="body"> 10 <div class="wrapper" id="wrapper"> 11 12 <header> 13 <div class="header-elements"> 14 15 <div class="header-center"> 16 <div class="header-center-box"> 17 <button class="menu-1 btn-s" > 18 <div class="menu-inner"> 19 メニュー1 20 </div> 21 </button> 22 23 <span class="btn-border"></span><!--.btn-border--> 24 25 <button class="menu-2 btn-s"> 26 <div class="menu-inner"> 27 メニュー2 28 </div> 29 </button> 30 31 <span class="btn-border"></span><!--.btn-border--> 32 33 <div class="menu-search"> 34 <button class="menu-3 btn-s"> 35 <div class="menu-inner"> 36 メニュー3 37 </div> 38 </button> 39 <button class="btn-search"> 40 <div class="search-icon btn-s"> 41 pic 42 </div><!--.search-icon--> 43 </button><!--.btn-search--> 44 </div><!--.menu-search--> 45 </div><!--.header-center-box--> 46 <div class="hide-searchbox-a" id="hide-searchbox-a"> 47 <div class="hide-searchbox-b"> 48 <div class="hide-searchbox-c"> 49 <div class="hide-box1-a"> 50 <div class="hide-box1-b"> 51 <div class="hide-box1-left"> 52 <div class="btn-one"> 53 ボタン1 54 </div><!--.btn-one--> 55 <div class="btn-two"> 56 ボタン2 57 </div><!--.two--> 58 </div><!--.hide-box1-a-l--> 59 <div class="hide-box1-right"> 60 <div> 61 <a class="btn-link" href="#"> 62 <div> 63 リンク 64 </div> 65 </a><!--.btn-link--> 66 </div> 67 </div><!--.hide-box1-a-r--> 68 69 </div><!--.hide-box1-b--> 70 </div><!--.hide-box1-a--> 71 72 </div><!--.header-searchbox-c--> 73 </div><!--.header-searchbox-b--> 74 </div><!--.header-searchbox-a--> 75 76 </div><!--.header-center--> 77 78 </div><!--.header-elements--> 79 </header> 80 81 <main> 82 <div class="space"> 83 コンテンツ1 84 </div> 85 <div class="space"> 86 コンテンツ2 87 </div> 88 89 </main> 90 91 92 93 94 </div><!--.wrapper--> 95 96 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> 97 <script src="script.js"></script> 98 99 </body> 100</html>

css

1@charset "utf-8"; 2/* CSS Document */ 3 4*{ 5 margin: 0; 6 padding:0; 7} 8 9img{ 10 vertical-align:bottom; 11 width:100%; 12 height:100%; 13 object-fit:cover; 14} 15 16.clearfix:after{ 17 content:""; 18 display:block; 19 clear:both; 20} 21 22a { 23 text-decoration: none; 24 color:inherit; 25} 26 27button{ 28 border:none; 29 background: transparent ; 30 outline :none; 31} 32 33body{ 34 font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif; 35 font-size: 14px; 36 line-height: 1.43; 37 color: #222; 38 background-color: #fff; 39 margin: 0; 40 -webkit-font-smoothing: antialiased; 41 -moz-osx-font-smoothing: grayscale; 42 box-sizing: border-box; 43} 44 45body::-webkit-scrollbar{ 46 display:none 47} 48 49/*============↓ここからheader============*/ 50header{ 51 height:80px; 52 width:100%; 53 display: flex; 54 position: fixed; 55 top:0; 56 border-bottom: solid 1px #ddd; 57 background-color: aquamarine; 58} 59 60.header-elements{ 61 width: 100%; 62 padding: 0 80px; 63 height:100%; 64 margin: auto; 65 display: flex; 66 justify-content: space-between; 67 background-color: bisque; 68} 69 70/*----↓ここからheader-center----*/ 71.header-center{ 72 background-color: brown; 73 width:100%; 74 text-align: center; 75 transform-origin: 0% 0%; 76 max-width: 2520px; 77} 78 79.header-center-box{ 80 display: inline-flex; 81 align-items: center; 82 text-align: left; 83 background-color:#fff; 84 border-radius:40px; 85 box-shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 4px 12px rgb(0 0 0 / 5%); 86 --lilsearch-field-text_min-width: 80px; 87 max-width: 100%; 88 vertical-align: middle; 89 border:solid 1px #ddd; 90 min-width: 348px; 91 box-sizing: border-box; 92 transform:translateY(16px); 93} 94 95.menu-1,.menu-2,.menu-3{ 96 height: 48px; 97 display: flex; 98 align-items: center; 99} 100 101.menu-inner{ 102 padding:0 16px; 103 white-space: nowrap; 104} 105 106.menu-1{ 107 font-weight:bold; 108 padding-left: 8px; 109 border-top-left-radius: inherit; 110 border-bottom-left-radius: inherit; 111 background-color: aqua; 112} 113 114.menu-2{ 115 font-weight:bold; 116 background-color: aqua; 117} 118 119.menu-search{ 120 display: flex; 121 align-items: center; 122} 123 124.menu-3{ 125 border-top-right-radius: inherit; 126 border-bottom-right-radius: inherit; 127 padding-right: 8px; 128 background-color: aqua; 129} 130 131.search-icon{ 132 width:2.4em; 133 background-color: aqua; 134} 135 136.btn-border{ 137 flex: 0 0 1px; 138 height: 24px; 139 width: 1px; 140 background-color:#ddd; 141} 142/*----↓ここから.hide-searchbox----*/ 143 144.hide-searchbox-a{ 145 background-color: rgba(200,200,200,1); 146 box-sizing: border-box; 147 opacity: 0; 148 pointer-events: none; 149 visibility: hidden; 150 padding-left:40px; 151 padding-right:40px; 152} 153 154.header-searchbox-b{ 155 padding-bottom:16px; 156} 157.header-searchbox-c{ 158 display: flex; 159 flex-direction: column; 160} 161 162.hide-box1-a{ 163 font-weight: 600; 164 font-size: 16px; 165} 166 167.hide-box1-b{ 168 display: flex; 169 justify-content: center; 170 height: 80px; 171} 172 173.hide-box1-left, 174.hide-box1-right{ 175 background-color: bisque; 176 display: flex; 177 align-items: center; 178} 179 180.btn-one, 181.btn-two{ 182 font-weight: 600; 183 background-color: aqua; 184 margin: 10px 16px; 185} 186 187 188 189.btn-online-experience-b{ 190 background-color:aquamarine; 191 display: block; 192 padding: 10px 16px; 193} 194 195/*----↑ここまで.hide-searchbox----*/ 196 197/*----↓ここから.hide-searchbox.toggle----*/ 198 199.hide-searchbox-a.toggle{ 200 position: absolute; 201 left:0; 202 top:0; 203 width: 100vw; 204 z-index: 2; 205 pointer-events: none; 206 transform: none; 207 opacity: 1; 208 visibility: visible; 209 height:500px; 210} 211 212/*----↑ここまで.hide-searchbox.toggle----*/ 213 214/*----↑ここまでheader-center----*/ 215 216 217/*============↑ここまでheader============*/ 218 219 220main{ 221 margin-top: 80px; 222} 223 224.space{ 225 width:90%; 226 margin: auto; 227 height:500px; 228 background-color:aquamarine; 229 display: block; 230} 231

JavaScript

1 2const searchBox = document.querySelector('.hide-searchbox-a'); 3 4document.addEventListener('DOMContentLoaded', function(){ 5 function menuClick(){ 6 searchBox.classList.add('toggle'); 7 } 8 9 const searchBtn = document.getElementsByClassName('btn-s'); 10 for(let i = 0; i < searchBtn.length; i++) { 11 searchBtn[i].addEventListener('click', menuClick, false); 12 } 13}, false); 14 15 16let searchClose = document.getElementById('wrapper'); 17 18searchClose.addEventListener('click', (event) => { 19 if((event.target.closest('header') === null)&&(event.target.closest('.hide-searchbox-a') === null)){ 20 searchBox.classList.remove('toggle'); 21 } 22});

試したこと

試しにほかの要素を仮で作って、そのクラス名を.hide-searchbox-aの代わりにif条件内に入れてみたところ、こちらは作用しました。
しかしなぜ.hide-searchbox-aだと反応してくれないのかわからず、、
勉強したての見苦しいコードで大変恐縮ですが、ご教授のほどよろしくお願いいたします。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答1

0

ベストアンサー

.hide-searchbox-a.togglepointer-events: none;でマウスイベントを無効にしているので、クリックは透過して下の要素(この場合はmain)をクリックしたことになります。
pointer-events: auto;にしてマウスイベントを受け取るようにすればご希望の動作になるでしょう。

css

1.hide-searchbox-a.toggle{ 2 position: absolute; 3 left:0; 4 top:0; 5 width: 100vw; 6 z-index: 2; 7 pointer-events: autoe; /* 修正 */ 8 transform: none; 9 opacity: 1; 10 visibility: visible; 11 height:500px; 12}

投稿2022/11/17 15:49

hatena19

総合スコア32016

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

darekatasukete

2022/11/17 15:54

なるほど!全然違う箇所を色々弄ってしまってました、、 大変助かりました!ありがとうございます!

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。