移动端导航栏点击菜单项后无法关闭的技术求助

问题说明 #

点击移动端navbar的菜单项时，页面会跳转到对应区块，但导航栏仍处于展开状态，无法自动关闭。

解决方案 #

现有代码缺少移动端导航的切换逻辑及菜单项点击后关闭导航的处理，只需在JavaScript代码中添加以下逻辑即可解决：

1. 插入核心逻辑 #

在现有自执行JavaScript函数中，添加两段代码（建议放在「Back to top button」逻辑之后，「Hero carousel indicators」逻辑之前）：

/**
* Mobile Navigation Toggle
*/
const mobileNavToggle = select('.mobile-nav-toggle');
const navbar = select('#navbar');

on('click', '.mobile-nav-toggle', function(e) {
  e.preventDefault();
  navbar.classList.toggle('navbar-mobile');
  this.classList.toggle('bi-list');
  this.classList.toggle('bi-x');
});

/**
* Close Mobile Nav on Menu Item Click
*/
on('click', '.navbar ul a', function(e) {
  // 检查当前是否为移动端导航展开状态
  if (navbar.classList.contains('navbar-mobile')) {
    navbar.classList.remove('navbar-mobile');
    mobileNavToggle.classList.toggle('bi-list');
    mobileNavToggle.classList.toggle('bi-x');
  }
}, true);

2. 逻辑说明 #

• 移动端导航切换：点击汉堡图标时，通过切换navbar-mobile类控制导航菜单的显示/隐藏，同时切换图标为关闭样式（bi-x）或汉堡样式（bi-list）。
• 菜单项点击关闭：监听所有导航菜单项的点击事件，当检测到导航栏处于移动端展开状态时，移除navbar-mobile类并恢复图标样式，自动关闭导航栏。

修改后的完整JavaScript代码 #

(function() {
  "use strict";

  /**
   * Easy selector helper function
   */
  const select = (el, all = false) => {
    el = el.trim()
    if (all) {
      return [...document.querySelectorAll(el)]
    } else {
      return document.querySelector(el)
    }
  }

  /**
   * Easy event listener function
   */
  const on = (type, el, listener, all = false) => {
    let selectEl = select(el, all)
    if (selectEl) {
      if (all) {
        selectEl.forEach(e => e.addEventListener(type, listener))
      } else {
        selectEl.addEventListener(type, listener)
      }
    }
  }

  /**
   * Easy on scroll event listener 
   */
  const onscroll = (el, listener) => {
    el.addEventListener('scroll', listener)
  }

  /**
   * Toggle .header-scrolled class to #header when page is scrolled
   */
  let selectHeader = select('#header')
  if (selectHeader) {
    const headerScrolled = () => {
      if (window.scrollY > 100) {
        selectHeader.classList.add('header-scrolled')
      } else {
        selectHeader.classList.remove('header-scrolled')
      }
    }
    window.addEventListener('load', headerScrolled)
    onscroll(document, headerScrolled)
  }

  /**
   * Back to top button
   */
  let backtotop = select('.back-to-top')
  if (backtotop) {
    const toggleBacktotop = () => {
      if (window.scrollY > 100) {
        backtotop.classList.add('active')
      } else {
        backtotop.classList.remove('active')
      }
    }
    window.addEventListener('load', toggleBacktotop)
    onscroll(document, toggleBacktotop)
  }

  /**
  * Mobile Navigation Toggle
  */
  const mobileNavToggle = select('.mobile-nav-toggle');
  const navbar = select('#navbar');

  on('click', '.mobile-nav-toggle', function(e) {
    e.preventDefault();
    navbar.classList.toggle('navbar-mobile');
    this.classList.toggle('bi-list');
    this.classList.toggle('bi-x');
  });

  /**
  * Close Mobile Nav on Menu Item Click
  */
  on('click', '.navbar ul a', function(e) {
    // 检查当前是否为移动端导航展开状态
    if (navbar.classList.contains('navbar-mobile')) {
      navbar.classList.remove('navbar-mobile');
      mobileNavToggle.classList.toggle('bi-list');
      mobileNavToggle.classList.toggle('bi-x');
    }
  }, true);

  /**
   * Hero carousel indicators
   */
  let heroCarouselIndicators = select("#hero-carousel-indicators")
  let heroCarouselItems = select('#heroCarousel .carousel-item', true)

  heroCarouselItems.forEach((item, index) => {
    (index === 0) ?
    heroCarouselIndicators.innerHTML += "<li data-bs-target='#heroCarousel' data-bs-slide-to='" + index + "' class='active'></li>":
      heroCarouselIndicators.innerHTML += "<li data-bs-target='#heroCarousel' data-bs-slide-to='" + index + "'></li>"
  });

  /**
   * Porfolio isotope and filter
   */
  window.addEventListener('load', () => {
    let portfolioContainer = select('.portfolio-container');
    if (portfolioContainer) {
      let portfolioIsotope = new Isotope(portfolioContainer, {
        itemSelector: '.portfolio-item'
      });

      let portfolioFilters = select('#portfolio-flters li', true);

      on('click', '#portfolio-flters li', function(e) {
        e.preventDefault();
        portfolioFilters.forEach(function(el) {
          el.classList.remove('filter-active');
        });
        this.classList.add('filter-active');

        portfolioIsotope.arrange({
          filter: this.getAttribute('data-filter')
        });
      }, true);
    }

  });

  /**
   * Initiate portfolio lightbox 
   */
  const portfolioLightbox = GLightbox({
    selector: '.portfolio-lightbox'
  });

  /**
   * Portfolio details slider
   */
  new Swiper('.portfolio-details-slider', {
    speed: 400,
    loop: true,
    autoplay: {
      delay: 5000,
      disableOnInteraction: false
    },
    pagination: {
      el: '.swiper-pagination',
      type: 'bullets',
      clickable: true
    }
  });

  /**
   * Initiate portfolio details lightbox 
   */
  const portfolioDetailsLightbox = GLightbox({
    selector: '.portfolio-details-lightbox',
    width: '90%',
    height: '90vh'
  });

  /**
   * Skills animation
   */
  let skilsContent = select('.skills-content');
  if (skilsContent) {
    new Waypoint({
      element: skilsContent,
      offset: '80%',
      handler: function(direction) {
        let progress = select('.progress .progress-bar', true);
        progress.forEach((el) => {
          el.style.width = el.getAttribute('aria-valuenow') + '%'
        });
      }
    })
  }

})()

内容的提问来源于stack exchange，提问作者Mohamed Roushdy