ECサイトのSP版のサイトでモーダルメニューを表示させて、バツマークでまたは要素以外の場所をクリックした際にメニューを閉じたいのですが、現状効きません。
ソースコードは下記の通りです。
よろしくお願いします。
<html> <!-- 開閉用ボタン --> <div class="menu-btn" id="js__btn"> <i class="menu-btn_i"><img src="images/bars_hoso.svg" alt=""></i> <!-- モーダルメニュー--> <nav class="menu" id="js__nav"> <button onClick="closeBtn();" class="batsu js__btn"><i><img src="images/cross_hoso.svg" alt=""></i></button> <ul class="l-header__inner__block l-header__inner__menu Nav"> <li class="l-header__inner__menu--item"><a href="/about/index.html">ABOUT</a></li> <li class="l-header__inner__menu--item"><a href="#">PRODUCT</a></li> <li class="l-header__inner__menu--item"><a href="#">CART</a></li> </ul> </nav> </div> <div style="display: inline-block; margin-top: -20px;"> <div class="l-header__inner__block__item--menu" type="button"> </div> <button onClick="HumBtn()"><i></i></button> </html> <style> #header{ height: 50px; vertical-align: middle; align-items: center; padding: 0 30px; } /* 開閉ボタン*/ .menu-btn { position: fixed; right: 20px; width: 30px; height: 10px; line-height: 50px; font-size: 12px; text-align: center; cursor: pointer; z-index: 1; display: flex; align-items: center; justify-content: flex-end; } .menu-btn span { color: #fff; } .menu-btn span:after { content: attr(data-txt-menu); } /* 開閉用ボタンがクリックされた時のスタイル */ .open .menu-btn span:after { content: attr(data-txt-close); } /* モーダルメニュー*/ .menu { position: fixed; display: table; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,.8); -webkit-transition: all .5s; transition: all .5s; visibility: hidden; opacity: 0; } .menu ul { display: table-cell; vertical-align: middle; } .menu li { width: 300px; height: 80px; line-height: 80px; margin: 0 auto; text-align: center; } .menu li a { display: block; font-size: 18px; color: #fff; } .menu li a:hover { color: #999; } .header_storename{ } /* 開閉用ボタンがクリックされた時のスタイル */ .open .menu { cursor: url(../images/cross.svg),auto; -webkit-transition: all .5s; transition: all .5s; visibility: visible; opacity: 1; } /* モーダルメニュー*/ #search{ display: none; } /* navメニュー*/ .batsu { display: block; position: relative; width: 30px; height: 30px; visibility: hidden; } .batsu::before, .batsu::after { /* 共通設定 */ content: ""; position: absolute; top: 10%; left: 50%; width: 2px; /* 棒の幅(太さ) */ height: 30px; /* 棒の高さ */ background: #333; } .batsu::before { transform: translate(-50%,-50%) rotate(45deg); } .batsu::after { transform: translate(-50%,-50%) rotate(-45deg); } .open .batsu{ visibility: visible; z-index: 161; top: 23px; right: -577px; } </style> <script type="text/javascript"> $(function () { var $body = $('main'); //開閉用ボタンをクリックでクラスの切替え $('#js__btn').on('click', function () { $body.toggleClass('open'); }); //メニュー名以外の部分をクリックで閉じる $('#js__nav').on('click', function () { $body.removeClass('open'); }); });
あなたの回答
tips
プレビュー