@yu11127kiposted at 2025-01-01

spサイズ時のグローバルナビでアコーディオン展開ができない

Q&A

Closed

HTML

解決したいこと

レスポンシブ対応で768px以下になった時のメニュー表示で、当院についてをクリックしたらサブメニューが表示されるように、矢印も回転するようにしたい。

768px以上の時はホバーでサブメニューが表示され、当院についてはクリックで遷移されるように設定したいです。

発生している問題・分からないこと

現在は768px以下の時は、クリックしたらページが遷移されるようになってしまっている。768px以上の時の設定は思うように設定できているので、spサイズの時の設定でどこがうまく表示されない原因なのか教えて欲しいです。

      <div class="p-sp-nav-bg sp-nav-close"></div>
      <div class="p-header__inner-right" id="js-global-nav">
        <!-- グローバルナビ -->
        <nav class="p-header-nav">
          <ul class="p-header-nav__ul">
            <li class="p-header-nav__li">
              <a href="index.html#news" class="p-header-nav__a">
                新着情報
              </a>
            </li>
            <li class="p-header-nav__li">
              <a href="index.html#treatment" class="p-header-nav__a">
                診察内容
              </a>
            </li>
            <li class="p-header-nav__li">
              <a href="index.html#flow" class="p-header-nav__a">
                治療の流れ
              </a>
            </li>
            <li class="p-header-nav__li">
              <a href="about.html" class="p-header-nav__a js-accordion-toggle">
                当院について
              </a>
              <div class="p-header-nav__li-inner js-accordion-content">
                <ul class="p-header-nav__li-inner-list">
                  <li class="p-header-nav__li-inner-item">
                    <a href="about.html#aboutus">
                      院長挨拶
                    </a>
                  </li>
                  <li class="p-header-nav__li-inner-item">
                    <a href="about.html#facility">
                      設備紹介
                    </a>
                  </li>
                  <li class="p-header-nav__li-inner-item">
                    <a href="about.html#company">
                      会社概要
                    </a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </nav>

        
.p-sp-nav-bg {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: $white;
    top: 50px;
    left: 0;
    transition: all 0.3s;
}

/* .openが付与された時 */
.p-sp-nav-bg.open {
    display: block;
}

.p-header-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: inherit;
    padding-top: myrem(17);
    @include mq(md) {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: calc(521 / 903 * 100%);
        padding: 0;
        height: inherit;
    }
}

.p-header-nav__ul {
    width: 100%;
    height: inherit;
    text-align: left;
    padding-left: myrem(10);
    @include mq(md) {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: center;
        padding: 0;
        position: relative;
    }
}

.p-header-nav__li>a {
    width: 100%;
    font-size: myrem(18);
    letter-spacing: 0.04em;
    font-weight: normal;
    border-bottom: 1px solid $green2;
    position: relative;
    display: block;
    @include mq(md) {
        font-size: myrem(15);
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        letter-spacing: .1em;
        border-bottom: none;
        height: inherit;
    }
}

.p-header-nav__li:first-of-type {
    @include mq(md) {
        width: calc(96 / 521 *100%);
        height: inherit;
    }
}

.p-header-nav__li:first-of-type>a {
    padding: myrem(12) 0;
    @include mq(md) {
        text-align: left;
        padding: 0;
    }
}

.p-header-nav__li:nth-of-type(2) {
    @include mq(md) {
        width: calc(123 / 521 *100%);
        height: inherit;
    }
}

.p-header-nav__li:nth-of-type(2)>a {
    padding: myrem(10) 0 myrem(13) 0;
    @include mq(md) {
        padding: 0;
    }
}

.p-header-nav__li:nth-of-type(3) {
    @include mq(md) {
        width: calc(141 / 521 *100%);
        height: inherit;
    }
}

.p-header-nav__li:nth-of-type(3)>a {
    padding: myrem(10) 0 myrem(13) 0;
    @include mq(md) {
        padding: 0;
    }
}

.p-header-nav__li:nth-of-type(4) {
    @include mq(md) {
        width: calc(161 / 521 *100%);
        height: inherit;
    }
}

.p-header-nav__li:not(:first-of-type)>a::before {
    @include mq(md) {
        position: absolute;
        content: "";
        width: 1px;
        height: myrem(14);
        background: $black;
        top: 40%;
        left: 1px;
    }
}

.p-header-nav__li:nth-of-type(4) .p-header-nav__a {
    border-bottom: 1px solid $green2;
    padding: myrem(12) 0;
    display: block;
    @include mq(md) {
        border: none;
        display: flex;
        align-items: center;
        padding: 0;
    }
}

.js-accordion-toggle::after {
    content: "";
    display: inline-block;
    width: myrem(13);
    height: myrem(13);
    border-right: 2px solid $green2;
    border-bottom: 2px solid $green2;
    transform: rotate(45deg);
    position: absolute;
    right: 13px;
    transition: transform 0.3s ease;
    @include mq(md) {
        display: none;
    }
}


.p-header-nav-li.is-open:last-child {
    transition: 0.3s ease;
    visibility: visible;
}

.p-header-nav__arrow.is-open:after {
    transform: translateY(60%) rotate(-135deg);
}

.p-header-nav__li:hover .p-header-nav__li-inner-list {
    // transition: visibility 0.3s ease, opacity 0.3s ease;
    @include mq(md) {
        visibility: visible;
        opacity: 1;
        transition: 0.3s ease;
    }
}

.js-accordion-content {
    display: none;
    @include mq(md) {
        display: block;
        width: 100%;
        position: relative;
        transition: .3s ease;
    }
}

.js-accordion-content.is-open {
    visibility: visible;
    display: block;
    transition: max-height 0.3s ease;
    @include mq(md) {
        position: relative;
    }
}

.p-header-nav__li-inner-list {
    @include mq(md) {
        margin-left: myrem(20);
        position: absolute;
        z-index: 1;
        opacity: 0;
        transition: all 0.3s;
        width: 100%;
        background: rgba(255, 255, 255, .8);
        position: absolute;
        border-radius: 0 0 myrem(10) myrem(10);
        right: myrem(-2);
        top: 100%;
    }
}

.p-header-nav__li-inner-item {
    font-size: myrem(15);
    line-height: calc(45 /15);
    letter-spacing: 0.04em;
    font-weight: normal;
    display: flex;
    position: relative;
    margin-left: myrem(15);
    @include mq(md) {
        font-size: myrem(16);
        letter-spacing: .1em;
        margin: 0 myrem(15);
        border-bottom: 1px solid rgba(72, 72, 72, .3);
    }
}

.p-header-nav__li-inner-item:hover {
    @include mq(md){
        font-weight: bold;
    }
}

.p-header-nav__li-inner-item>a {
    width: 100%;
    @include mq(md) {
        display: block;
        margin: 0 auto;
    }
}

.p-header-nav__li-inner-item:first-of-type>a {
    @include mq(md) {
        padding: myrem(3) 0 myrem(10) 0;
    }
}

.p-header-nav__li-inner-item:last-of-type>a {
    @include mq(md) {
        border: none;
        padding: myrem(10) 0;
    }
}

.p-header-nav__li-inner-item>a:hover {
    color: $green;
    transition: visibility 0.3s ease, opacity 0.3s ease;
    @include mq(md) {
        transition: none;
    }
}

.p-header-nav__li-inner-item:last-of-type {
    @include mq(md) {
        border: none;
    }
}

.p-header-nav__li-inner-item::before {
    content: "";
    width: myrem(16);
    display: block;
    margin-left: myrem(-15);
    position: absolute;
    left: myrem(-10);
    top: 50%;
    transform: translateY(-50%);
    border-top: 1px solid $green2;
    @include mq(md) {
        display: none;
        margin: 0;
    }
}

.p-header-nav__li>a:hover {
    color: $green;
    transition: .3s ease;
    @include mq(md) {
        font-weight: bold;
    }
}

body {
    width: 100%;
    height: 100%;
}

$(document).ready(function () {
  $('.js-accordion-toggle').on('click', function (e) {
    if ($(window).width() < 768) {
      e.preventDefault(); // ページ遷移を防ぐ
      $(this).toggleClass('.is-open');
      $(this).next('.js-accordion-content').slideToggle();
    } 
    // 768px以上の場合、ページ遷移はデフォルト動作として許可
  });

  $(window).on('resize', function () {
    if ($(window).width() >= 768) {
      $('.js-accordion-content').show();
      $('.js-accordion-toggle').removeClass('is-open');
    } else {
      $('.js-accordion-content').hide();
    }
  }).trigger('resize');
});

自分で試したこと

htmlやjQueryの修正、書き直しをしてみたが崩れるばかりで改善されなかったです。

Are you sure you want to delete the question?

spサイズ時のグローバルナビでアコーディオン展開ができない

解決したいこと

発生している問題・分からないこと

自分で試したこと

No Answers yet.

Your answer might help someone💌