Q&A
回答ありがとうございます
追加したjqueryのコードでホバー処理をしていたのでhoverをclickに変えたらできるかなと思ったのですができませんでした
どういった原因が考えられるでしょうか？
現在のコードです
当施設の治療法にホバーした時に「header-treatment」の内容が表示されるようになっています
これをhoverではなくクリックで表示させるようにしたいです
よろしくおねがいします
header.php
<ul class="nav-pc"> <li> <a href="/Doctor/"> <i class="fas fa-square-full"></i> <p>院長紹介</p> <span>Doctor</span> </a> </li> <li><a href="/about/"> <i class="fas fa-square-full"></i> <p>当施設について</p> <span>About</span></a></li> <li class="header-treatment_wrapper" id="header-treatment"><a href="/treatment/"> <i class="fas fa-square-full" ></i> <p>当施設の治療法</p><span>Treatment</span></a> <ul class="header-treatment"> <li> <a href="/treatment/therapy/" title=""> <i class="fas fa-square-full" id="header-treatment"></i> <p>体液調整療法</p> <span>Therapy</span> </a> </li> <li> <a href="/treatment/chiropractic/" title=""> <i class="fas fa-square-full" id="header-treatment"></i> <p>カイロプラクティック</p> <span>Chiropractic</span> </a> </li> <li><a href="/treatment/manipulative/" title=""><i class="fas fa-square-full" id="header-treatment"></i> <p>整体</p> <span>Manipulative</span> </a></li> <li><a href="/treatment/bunky/" title=""><i class="fas fa-square-full" id="header-treatment"></i> <p>バンキー療法</p> <span>Bunky Therapy</span> </a></li> <li><a href="/treatment/moxibustion/" title=""><i class="fas fa-square-full" id="header-treatment"></i> <p>鍼灸治療</p> <span>Acupuncture</span></a></li> <li><a href="/treatment/moxibustion-2/" title=""><i class="fas fa-square-full" id="header-treatment"></i> <p>お灸治療</p> <span>Moxibustion</span></a></li> </ul> </li> <li><a href="/lumbago/"> <i class="fas fa-square-full"></i> <p>腰痛について</p><span>Lumbago</span></a></li> <li><a href="/other/"> <i class="fas fa-square-full"></i> <p>その他の症状について</p><span>Other</span></a></li> <li><a href="/voice/"> <i class="fas fa-square-full"></i> <p>患者様からの声</p><span>Voice</span></a></li> <li><a href="/faq/"> <i class="fas fa-square-full"></i> <p>よくある質問</p><span>Q&A</span></a></li> </ul> <a href="tel:03-3935-5741" title=""><i class=" phone-i fas fa-phone"></i></a> <button type="button" id="js-buttonHamburger" class="sp l--header__button p--hamburger" aria-controls="global-nav" aria-expanded="false"> <span class="p--hamburger__line"> <span class="u--visuallyHidden"> メニューを開閉する </span> </span> </button> <nav class="gnav"> <div class="gnav__wrap"> <ul class="gnav__menu"> <li class="gnav__menu__item"><?php wp_nav_menu( array( 'theme_location' => 'global-nav' ) ); ?></li> </ul> </div> <!--gnav-wrap--> </nav> </div> </div>
header.scss
padding-top: 2rem; width: 100%; @include flex2; align-items: flex-end; justify-content: space-between; @media #{$tas} { width: auto; } .nav-pc { width: 100%; @include flex2; justify-content: space-between; align-items: flex-end; @media screen and (max-width: 961px) { display: none; } .header-treatment_wrapper { &:hover { opacity: 1; } } li { * { color: $primary; } padding-top:1rem; display:inline-block; text-align: center; transition:.5s; flex-grow: 1; padding-bottom:1rem; position:relative; .header-treatment { display: none; width: 25rem; position: absolute; top: 100%; left: 0; li+li { position: relative; &:before { position: absolute; left: 0; top: 0; content: ''; height: 1px; display: inline-block; width: 100%; background-image: linear-gradient(to right, $primary 70%, rgba(255, 255, 255, 0) 0%); background-position: top; background-size: 20px 1px; background-repeat: repeat-x; } } li { @include flex2; background-color: $white; text-align: left; padding: 1rem 2rem; font-size: 1rem; &:hover { opacity: .9; } a { width: 100%; height: 100%; @include flex2; align-items: center; p { margin-left: 1rem; } i { font-size: 1rem; } } } } &:hover { opacity: .5; } a { width: 100%; height: 100%; i { font-size: 1rem; transform: rotate(45deg); } p { font-family: '小塚ゴシック Pro', 'Kozuka Gothic Pro', sans-serif; font-size: 1rem; letter-spacing: .01em; width: 100%; margin: .5rem auto; } span { font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', sans-serif; font-size: .8rem; letter-spacing: .01em; color: $primary; } } } li+li { position: relative; &:before { position: absolute; left: 0; bottom: 0; content: ''; display: inline-block; height: 100%; width: 2px; background-image: linear-gradient($primary 70%, rgba(255, 255, 255, 0) 0%); background-position: right; background-size: 2px 20px; background-repeat: repeat-y; } } } .phone-i { display: none; @media #{$tas} { display: block } position:absolute; right:7rem; top: 50%; font-size:4rem; color:$primary; transform:translateY(-50%) rotate(135deg); } }
ホバーした処理はこのコードを使うことで行われますが
jquery
$(function(){ $('#header-treatment, #menu-item-1184').hover( function() { $('.header-treatment, .sub-menu').fadeIn(); }, function() { $('.header-treatment, .sub-menu').fadeOut(); } ) }
ホバーの部分をクリックにすると反応しないです
$(function(){ $('#header-treatment, #menu-item-1184').click( function() { $('.header-treatment, .sub-menu').fadeIn(); }, function() { $('.header-treatment, .sub-menu').fadeOut(); } )
回答2件
0
自己解決
$(function(){ $('#header-treatment, #menu-item-1184').click( function() { $('.header-treatment, .sub-menu').fadeToggle(); } ); });
こちらのコードでできました
投稿2020/12/04 15:50
総合スコア29
0
jsで処理するか、ラジオボタンを駆使するかのどちらかです。
投稿2020/12/04 11:34
総合スコア116683
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。