如何僅使用javascript制作此切換選單？-有解無憂

我在我的博客模板中使用了這個默認選單，但我注意到它使用的庫影響了 Web 速度。所以請任何人幫助我在沒有 jquery 庫的情況下制作這個選單。謝謝你。

<script rel='preload' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' type='text/javascript'></script>
<div class='main-nav-main'>
  <div class='mobile-menu' />
  <div class='ct-wrapper'>
    <span class='slide-menu-toggle'>Menu</span>
    <!-- Main menu -->
    <ul class='sf-menu'>
      <li><a href='/'>Home</a></li>
      <li><a href='/p/sample-page_12.html'>sample page</a></li>
      <li><a href='#'>drop down</a>
    </ul>
  </div>
</div>

<script type='text/javascript'>
  //<![CDATA[
  $(document).ready(function() {
    $('ul.sf-menu').clone().appendTo('.mobile-menu');
    $('.slide-menu-toggle').on('click', function() {
      $('body').toggleClass('nav-active');
    });

  });
  //]]>
</script>

https://bltemplatetest2.blogspot.com/檢查這個演示，因為大尺寸我無法添加 css

uj5u.com熱心網友回復：

這是純 JavaScript 的重制版。
基本上它使用的是：

一個EL()用于查詢 DOM 元素的小實用函式
.addEventListener()而不是 jQuery.on()和.click()方法
.cloneNode()方法來克隆帶有true引數的元素
.classList.toggle()方法而不是 jQuery 的.toggleClass()

const EL = (sel, el) => (el || document).querySelector(sel);

const EL_body = EL("body");
const EL_menu_sf = EL(".sf-menu");
const EL_menu_sf_cln = EL_menu_sf.cloneNode(true);
const EL_menu_mobile = EL(".mobile-menu");
const EL_menu_toggle = EL(".slide-menu-toggle");

EL_menu_mobile.append(EL_menu_sf_cln);

EL_menu_toggle.addEventListener("click", () => {
  EL_body.classList.toggle("nav-active");
});

.mobile-menu                 { display: none; }
body.nav-active .mobile-menu { display: block; }

<div class='main-nav-main'>
  <div class='mobile-menu'></div>
  <div class='ct-wrapper'>
    <span class='slide-menu-toggle'>Menu (click me)</span>
    <!-- Main menu -->
    <ul class='sf-menu'>
      <li><a href='/'>Home</a></li>
      <li><a href='/p/sample-page_12.html'>sample page</a></li>
      <li><a href='#'>drop down</a>
    </ul>
  </div>
</div>

為了激發你的想象力，這里有一個完全沒有 JS 的：

顯示代碼片段

#menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  background: #ddd;
  color: #fff;
  display: flex;
  flex-direction: column;
  transition: 0.4s;
}

#menu nav {
  margin: auto;
  display: flex;
  gap: 1em;
  flex-direction: column;
}

.menu-icon {
  position: fixed;
  top: 1em;
  right: 2em;
  font-size: 2em;
  cursor: pointer;
}

#menu-toggle:checked~#menu {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

<input id="menu-toggle" type="checkbox" hidden />

<label class="menu-icon" for="menu-toggle" aria-label="Toggle menu">?</label>

<div id="menu">

  <label class="menu-icon" for="menu-toggle" aria-label="Toggle menu">?</label>

  <nav>
    <a href="#!">HOME</a>
    <a href="#!">ABOUT</a>
    <a href="#!">PRODUCTS</a>
    <a href="#!">CONTACT</a>
  </nav>

</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/399371.html

標籤：javascript html 查询

上一篇：使用axios回傳位置

下一篇：將嵌套的JSON資料加載到HTML<UL><LI>串列....>