あるサイトの模写コーディングをしているのですが、jQueryなどでハンバーガーメニューを実装していてスマホ版のハンバーガーメニューを開いたままpc版に戻すと、卒業生の声・実績、メディア、サポートなどの隠したいメニューがhoverされて出現いたします。おそらくjQueryでなんらかのメゾットを加えればハンバーガーメニュー表示状態でpc版に戻しても隠れると思うのですが、、、ご教授頂ければ幸いです。```ここに言語を入力
コード
html <div class="hide-menu"> <ul class="accordion-menu"> <li> <div class="accordion-menu--menu"><span class="text">はじめての方へ</span><span class="plus"></span></div> <ul class="accordion-menu--menu__ul"> <li>マンガでわかるRaiseTech</li> <li>サポート体制</li> <li>トライアル受講</li> <li>就職・転職支援制度</li> <li>ご利用の流れ</li> </ul> </li> <li> //--css---// .accordion-menu { position: absolute; top: 60px; left: 0; width: 100%; background-color: white; &--menu{ font-weight: bold; padding: 8px; display: flex; justify-content: space-between; .plus .text { display: block; position: relative; } .plus { &:after, &:before{ content: ""; display: block; width: 27px; height: 3px; background: #000; border-radius: 5px; } &:before { margin-top: 2px; } &:after { transform: translateY(-50%) rotate(90deg); } } .active { &:after{ opacity: 0; } } } li{ padding: 8px; } //--jQuery--// $(function (){ $('.btn').hover(function(){ $(this).find('.sub-menu').slideDown(200); }, function(){ $(this).find('.sub-menu').hide(); }) }); //ハンバーガーメニュー $(function (){ $(".accordion-menu").hide(); $(".accordion-menu--menu__ul").hide(); $('.humburger-button').click(function(){ $(this).toggleClass("color"); $('.icon').toggleClass("close"); $('.accordion-menu').slideToggle(200); }); $(".accordion-menu--menu").hover(function() { $(this).next().slideToggle(500); $(this).find('.plus').toggleClass('active'); }); });
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。