如何將下拉菜單從 Hover 更改為“單擊”

Question

我有一個導航欄菜單，其中有 3 個下拉菜單，默認為 hover。 因為 3 個菜單靠得很近，下拉菜單中的 hover 會導致錯誤/沖突，我想用“點擊”下拉菜單替換它，我必須在哪里更改 css 或 ZDE9B9ED78D7E2E1DCEEFFEE780ZE 代碼

 <nav class="nav-menu d-none d-lg-block">
    <ul>
      <li class="active"><a href="{{route('welcome')}}">Home</a></li>
      <li class="drop-down"><a href="#">Profile</a>
        <ul>
            <li><a href="#about">WBK & WBBM</a></li>
            <li><a href={{route('sambutan')}}>Sambutan</a></li>
            <li><a href={{route('visimisi')}}>Visi Misi</a></li>
            <li><a href={{route('strukturorganisasi')}}>Struktur Organisasi</a></li>
            <li><a href={{route('pejabat')}}>Pejabat Struktural</a></li>
            <li><a href={{route('sejarah')}}>Sejarah Kejari Sragen</a></li>
            <li><a href={{route('doktrin')}}>Tri Krama Adhyaksa</a></li>
          </ul>
      </li>

      <li class="drop-down"><a href="#">Bidang</a>
        <ul>
          <li><a href="#bidang">Bidang</a></li>
          <li><a href={{route('pembinaan')}}>Pembinaan</a></li>
          <li><a href={{route('intelijen')}}>Intelijen</a></li>
          <li><a href={{route('pidum')}}>Tindak Pidana Umum</a></li>
          <li><a href={{route('pidsus')}}>Tindak Pidana Khusus</a></li>
          <li><a href={{route('datun')}}>Perdata & Tata Usaha Negara</a></li>
          <li><a href={{route('barbuk')}}>Pengolahan Barang Bukti & Barang Rampasan</a></li>
        </ul>
      </li>
    </ul>
  </nav><!-- .nav-menu -->

Answer 1

如果您也發布 CSS/JS 將會有所幫助。 我將您的 HTML 設置為非常基本的導航，但將來請遵循Stack Overflows Minimal Reproducible Guidelines 。

您的代碼示例應該是……

• …最小——使用盡可能少的代碼，但仍然會產生同樣的問題
• …完成 - 提供其他人在問題本身中重現您的問題所需的所有部分
• …可重現——測試您將要提供的代碼以確保它重現問題

那就是說！

這是您所描述的工作示例，如果這不符合您的需要，請告訴我。

 let navLinks = document.querySelectorAll("nav > ul > li"); navLinks.forEach(link => { link.addEventListener('click', () => toggleClassName(link, navLinks) ); }); function toggleClassName(link, navLinks) { if (link.classList.contains('active')) { link.classList.remove('active'); } else { navLinks.forEach(currentLink => {currentLink.classList.remove('active');}) link.classList.add('active'); } }

 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { font-family: 'Roboto', sans-serif; } ul { list-style:none; padding: 1em; margin:0; } li { padding: .5em; } nav > ul { display:flex; list-style:none; } nav > ul > li { position:relative; } nav > ul > li > a { color: black; text-decoration: none; background: #EF798A; padding: .5em; border-radius: .3em; color:white; font-weight:bold; text-transform:uppercase; } nav > ul > li > ul { position:absolute; top:calc(100% +.5em); width: 10em; background: #E5C3D1; border-radius: .3em; max-height:1px; opacity:0; visibility:hidden; } nav > ul > li.active > ul { max-height:100vh; opacity:1; visibility:visible; } nav > ul > li > ul > li { padding-top: 0; } nav > ul > li > ul > li::after { content: " "; position: absolute; bottom: 99%; /* At the bottom of the tooltip */ left: 7%; margin-left: -.5em; border-width: .5em; border-style: solid; border-color: transparent transparent #E5C3D1 transparent; }

 <nav class="nav-menu d-none d-lg-block"> <ul> <li class="active"><a href="{{route('welcome')}}">Home</a></li> <li class="drop-down active"><a href="#">Profile</a> <ul> <li><a href="#about">WBK & WBBM</a></li> <li><a href={{route('sambutan')}}>Sambutan</a></li> <li><a href={{route('visimisi')}}>Visi Misi</a></li> <li><a href={{route('strukturorganisasi')}}>Struktur Organisasi</a></li> <li><a href={{route('pejabat')}}>Pejabat Struktural</a></li> <li><a href={{route('sejarah')}}>Sejarah Kejari Sragen</a></li> <li><a href={{route('doktrin')}}>Tri Krama Adhyaksa</a></li> </ul> </li> <li class="drop-down"><a href="#">Bidang</a> <ul> <li><a href="#bidang">Bidang</a></li> <li><a href={{route('pembinaan')}}>Pembinaan</a></li> <li><a href={{route('intelijen')}}>Intelijen</a></li> <li><a href={{route('pidum')}}>Tindak Pidana Umum</a></li> <li><a href={{route('pidsus')}}>Tindak Pidana Khusus</a></li> <li><a href={{route('datun')}}>Perdata & Tata Usaha Negara</a></li> <li><a href={{route('barbuk')}}>Pengolahan Barang Bukti & Barang Rampasan</a></li> </ul> </li> </ul> </nav><.-- .nav-menu -->