侧边栏菜单中的手风琴无法使用 HTML/CSS/Javascript 正常运行

Question

我的编码：

function show() {
  document.getElementById("sidebar").classList.toggle('active');
}

//COPY & PASTED FROM CHATGPT
//Get all accordion items 
const accordionItems = document.querySelectorAll('.accordion-item');

// Add click event listeners to each accordion item
accordionItems.forEach((item) => {
  const header = item.querySelector('.accordion-header');
  const content = item.querySelector('.accordion-content');

  header.addEventListener('click', () => {
    // Toggle the content's visibility
    if (content.style.display === 'none' || content.style.display === '') {
      content.style.display = 'block';
    } else {
      content.style.display = 'none';
    }
  });
});

* {
  margin: 0px;
  padding: 0px;
}

a.homepage {
  color: white;
  text-decoration: none;
}

a.homepage:visited {
  color: white;
  text-decoration: none;
}

button.toggle-btn {
  background-color: dark grey;
  color: black;
  font-family: sans-serif;
  font-size: 36px;
}

h1 {
  background-color: black;
  margin-top: 20px;
}

h1 span {
  color: white;
  font-family: sans-serif;
  font-size: 36px;
  padding-left: 20px;
}

p.≡ {
  font-size: 2em;
}

#sidebar {
  position: absolute;
  width: 300px;
  height: 1000%;
  background: #808080;
  left: -300px;
  transition: .4s;
}

#sidebar ul li {
  list-style: none;
  color: #fff;
  font-size: 20px;
  padding: 10px;
  text-align: left;
}

#sidebar .toggle-btn {
  position: absolute;
  top: 30px;
  left: 330px;
}

.toggle-btn span {
  width: 45px;
  height: 4px;
  background: #000;
  display: block;
  margin-top: 4px;
}

#sidebar.active {
  left: 0;
}


/* COPY & PASTE */


/* Add your CSS styles here */

.accordion {
  width: 300px;
  /* Adjust the width as needed */
}

.accordion-item {
  border: 1px solid #ccc;
  margin-bottom: 5px;
}

.accordion-header {
  padding: 10px;
  background-color: #f0f0f0;
  cursor: pointer;
}

.accordion-content {
  display: none;
  padding: 10px;
  background-color: #fff;
}

<h1>
  <!-- HEADING -->
  <span id="heading"> 
<a href="../../countries-index.html" class="homepage">COUNTRIES OF THE WORLD</a></li>
</span>
</h1>

<div id="sidebar">
  <!-- CLICK THE TRIPLE BOND TO OPEN/CLOSE SIDEBAR -->
  <div class="toggle-btn" onclick="show()">
    <p class="≡"><strong>≡</strong></li>
  </div>

  <div class="accordion">
    <!-- COPY & PASTED FROM CHATGPT -->
    <div class="accordion-item">
      <div class="accordion-header">
        A
      </div>
      <div class="accordion-content">
        <ul>
          <li><a href="#">Afghanistan</a></li>
          <li><a href="#">Albania</a></li>
          <li><a href="#">Algeria</a></li>
          <li><a href="#">Andorra</a></li>
          <li><a href="#">Angola</a></li>
          <li><a href="#">Antigua and Barbuda</a></li>
          <li><a href="#">Argentina</a></li>
          <li><a href="#">Armenia</a></li>
          <li><a href="#">Australia</a></li>
          <li><a href="#">Austria</a></li>
          <li><a href="#">Azerbaijan</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

在标题下，我在标题下方放置了一个像这样的三键符号 ≡ 。 当您单击它时，它会在左侧打开一个侧边栏菜单，当您再次单击它时，它会关闭侧边栏。这按预期工作。

现在，我计划在标题中添加字母 A 到 Z，但我现在只使用 A 来看看效果如何。当侧边栏打开时，A 就在那里。这按预期工作。

但是，当您单击 A 时，没有阿富汗、阿尔巴尼亚、安道尔、阿尔及利亚等国家/地区列表中的手风琴。这就是我遇到的问题。我不知道如何将手风琴合并到侧边栏菜单中。

我将所有代码（侧边栏+A 上的手风琴）复制粘贴到一个单独的文件中，没有任何CSS 代码。但出现的是 == 符号出现在顶部（但不执行任何操作）并且手风琴工作得很好。

这是我第一次使用 Javascript（因此我依赖 ChatGPT）。稍后我将尝试详细学习 Javascript，但现在，我所做的只是尝试更改变量名称（尽管我没有为上面的代码这样做）。

Answer 1

我刚刚运行，它似乎工作正常，您可以单击运行代码片段并检查它，但是，如果您遇到的行为不是您期望实现的，您可以删除更多解释你想要实现的目标