网站深色模式图片替换与下拉按钮重置功能实现求助

1. 深色模式自动切换Logo图片 #

修改主题切换脚本，在切换dark类的同时同步替换Logo图片路径：

<div class="image1">
    <img id="header-logo" src="img/hello.jpg" alt="something" width="400" height="300">
</div>

<script>
document.querySelector('.theme-toggle-button').addEventListener('click', () => {
  const body = document.body;
  const logoImg = document.getElementById('header-logo');
  
  body.classList.toggle('dark');
  
  // 根据当前主题切换图片
  if (body.classList.contains('dark')) {
    logoImg.src = 'img/hello-dark.jpg';
  } else {
    logoImg.src = 'img/hello.jpg';
  }
})
</script>

说明 #

• 给img标签添加id="header-logo"，方便快速定位元素
• 每次切换主题时，判断body的dark类状态，对应替换图片路径，实现Logo自动适配深色/浅色模式

2. 点击Other按钮可重置所有下拉内容 #

调整按钮点击逻辑，当Other按钮对应的下拉内容已展开时，点击后仅执行重置操作：

<div class="container">
  <button id="one" class="click one" title="click me">About Me</button>
  <div class="list-1 sec">
    <h1 class="content-header-one content">Dummy text header</h1>
    <p class="content-paragraph-one">Dummy text</p>
  </div>
  <button class="click two" title="click me">Education and Achivements</button>
  <div class="list-2 sec">
    <p class="content-paragraph2 content">Dummy text</p>
    <ul class="content-list content">
      <li>- Achivement #1</li>
      <li>- Achivement #2</li>
      <li>- Achivement #3</li>
    </ul>
  </div>
  <button class="click three" title="click me" >Other</button>
  <div class="list-3 sec">
    <h1 class="content-header-two content">Dummy text header</h1>
    <p class="content-paragraph3 content">Dummy text</p>
  </div>
  <script>
        // 获取下拉列表元素
        let list1 = document.querySelector(".list-1");
        let list2 = document.querySelector(".list-2");
        let list3 = document.querySelector(".list-3");

        // 重置所有下拉列表为收起状态
        const resetAllViews = () => {
          list1.classList.remove("newlist");
          list2.classList.remove("newlist");
          list3.classList.remove("newlist");
        };

        // 按钮点击逻辑
      document.addEventListener(
        "click",
        function (e) {
          const target = e.target;
          if (target.classList.contains("one")) {
            resetAllViews();
            list1.classList.add("newlist");
          } else if (target.classList.contains("two")) {
            resetAllViews();
            list2.classList.add("newlist");
          } else if (target.classList.contains("three")) {
            // 判断Other对应的列表是否已展开
            const isList3Open = list3.classList.contains("newlist");
            resetAllViews();
            // 未展开时才添加展开类
            if (!isList3Open) {
              list3.classList.add("newlist");
            }
          }
        }, false);
  </script>
</div>

说明 #

• 将多个独立if改为else if，减少不必要的条件判断
• 点击Other按钮时，先检查对应下拉内容的展开状态：已展开则仅重置所有内容，未展开则重置后展开自身

内容的提问来源于stack exchange，提问作者A guy with questions