响应式导航栏Dark mode按钮仅移动端生效问题求助

问题描述 #

我已将导航栏设置为响应式，但当前Dark mode按钮仅在移动端屏幕上生效。尝试在JS代码中将btn替换为hideOnMobile但未解决问题，推测问题源于hideOnMobile类的媒体查询设置，因为该类在移动端隐藏时功能正常。

相关代码 #

HTML #

<nav>
  <ul class="sidebar">
    <li onclick=hideSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="m249 849-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg></a></li>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Sign In</a></li>
    <li class='important'><a href="#">Get Started</a></li>
    <li><div class="btn">
      <div class="btn__indicator">
        <div class="btn__icon-container">
          <i class="btn__icon fa-solid fa-sun fa-moon"></i>
        </div>
      </div>
    </div></li>
  </ul>
  <ul>
    <li class="active hideOneMobile"><a href="">Home</a></li>
    <li class="hideOnMobile"><a href="#">Contact</a></li>
    <li class="hideOnMobile"><a href="#">Sign In</a></li>
    <li class='important hideOnMobile'><a href="#">Get Started</a></li>
    <li class="hideOnMobile"><div class="btn">
      <div class="btn__indicator">
        <div class="btn__icon-container">
          <i class="btn__icon fa-solid fa-sun fa-moon"></i>
        </div>
      </div>
    </div></li>
    <li class="menu-button" onclick=showSidebar()><a href="#"><svg xmlns="http://www.w3.org/2000/svg" height="26" viewBox="0 96 960 960" width="26"><path d="M120 816v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z"/></svg></a></li>
  </ul>
</nav>

CSS #

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
nav ul {
  visibility: unset;
  opacity: 1;
  background: none;
  display: flex;
  margin: 0;
  padding: 0;
  position: unset;
  height: auto;
  align-items: center;
  transform: translateX(0);
  width:100%;
  transition: all .3s;
} 
nav ul li a {
  color: var(--primary-color);
  font-size: 1.1em;
  font-weight: 700;
  padding: 0 1em;
  display: block;
  text-decoration: none;
}
.sidebar{
  position: fixed;
  top: 0; 
  right: 0;
  height: 100vh;
  width: 250px;
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
  list-style: none;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  z-index: 1000;
  
}
.sidebar li{
  width: 100%;
  margin: 1rem;
}
.sidebar .important{
  width: 8rem;
  margin-left: 1.8rem;
}
.sidebar .btn {
  margin-left: 0.8rem;
}
.sidebar a{
  width: 100%;
}
.menu-button{
  display: none;
}
@media(max-width: 800px){
  .hideOnMobile {
    display: none;
  }
  .active {
    display: none;
  }
  .sidebar .active{
    display: block;
  }
  .menu-button{
    display: block;
  }
}
@media(max-width: 400px){
  .sidebar{
    width: 100%;
  }
}

原JavaScript #

btn.addEventListener('click', () => {
  body.classList.toggle('dark-mode');
  const isDarkMode = body.classList.contains('dark-mode');
  localStorage.setItem('dark-mode', JSON.stringify(isDarkMode));
  console.log(isDarkMode);
  // Toggle the spin animation class
  icon.classList.add('animated');
  setTimeout(() => {
    icon.classList.remove('animated');
  }, 500);
  if (isDarkMode) {
    icon.classList.remove('fa-sun');
    icon.classList.add('fa-moon');
    articleTitles.forEach(title => {
      title.classList.add('dark-mode');
    });
    articleAuthor.classList.add('dark-mode');
  } else {
    icon.classList.remove('fa-moon');
    icon.classList.add('fa-sun');
    articleTitles.forEach(title => {
      title.classList.remove('dark-mode');
    });
    articleAuthor.classList.remove('dark-mode');
  }
});

问题原因 #

页面里存在两个.btn元素：一个在移动端sidebar中，另一个在桌面端导航的hideOnMobile列表项里。但原JS代码只给其中一个按钮绑定了点击事件（大概率是sidebar里的那个），桌面端的按钮没有事件绑定，所以点击无反应。

解决方案 #

修改JavaScript代码，给所有.btn元素绑定点击事件，同时同步两个按钮的图标状态，确保dark mode切换时所有按钮的显示一致：

// 获取所有dark mode按钮和图标
const btns = document.querySelectorAll('.btn');
const body = document.body;
const icons = document.querySelectorAll('.btn__icon');
// 假设你已定义这两个选择器，若未定义需根据实际DOM调整
const articleTitles = document.querySelectorAll('.article-title');
const articleAuthor = document.querySelector('.article-author');

// 初始化dark mode状态，从localStorage读取并同步到所有元素
const savedDarkMode = JSON.parse(localStorage.getItem('dark-mode'));
if (savedDarkMode) {
  body.classList.add('dark-mode');
  icons.forEach(icon => {
    icon.classList.remove('fa-sun');
    icon.classList.add('fa-moon');
  });
  articleTitles.forEach(title => title.classList.add('dark-mode'));
  articleAuthor?.classList.add('dark-mode');
}

// 给每个按钮绑定点击事件
btns.forEach(btn => {
  btn.addEventListener('click', () => {
    body.classList.toggle('dark-mode');
    const isDarkMode = body.classList.contains('dark-mode');
    localStorage.setItem('dark-mode', JSON.stringify(isDarkMode));
    
    // 更新所有按钮的图标动画和状态
    icons.forEach(icon => {
      icon.classList.add('animated');
      setTimeout(() => icon.classList.remove('animated'), 500);
      
      if (isDarkMode) {
        icon.classList.remove('fa-sun');
        icon.classList.add('fa-moon');
      } else {
        icon.classList.remove('fa-moon');
        icon.classList.add('fa-sun');
      }
    });
    
    // 同步文章标题和作者的dark mode样式
    articleTitles.forEach(title => {
      isDarkMode ? title.classList.add('dark-mode') : title.classList.remove('dark-mode');
    });
    if (articleAuthor) {
      isDarkMode ? articleAuthor.classList.add('dark-mode') : articleAuthor.classList.remove('dark-mode');
    }
  });
});

额外检查 #

• 确保桌面端的.btn元素没有被其他元素遮挡，或者设置了pointer-events: none导致无法点击
• 确认.animated类的CSS动画已正确定义，保证图标切换时的动画效果正常

内容的提问来源于stack exchange，提问作者Ahmed Essouaied