为啥我的切换按钮无法使用 Javascript 打开我的响应式菜单？

Posted 2023-03-06

【中文标题】为啥我的切换按钮无法使用 Javascript 打开我的响应式菜单？

【英文标题】：Why doesn't my toggle button open my responsive menu with Javascript?为什么我的切换按钮无法使用 Javascript 打开我的响应式菜单？

【发布时间】：2021-12-10 23:26:59

【问题描述】：

我希望在单击第一个 ul 中的汉堡菜单时打开 nav 菜单。我使用 javascript 来定位第二个 ul 中的 nav-list 类，但是当我点击时，什么也没有发生。

我最初在一个列表中拥有汉堡包图标和链接，并尝试使用display: none 处理除第一个 li 项目之外的所有内容，但我意识到我无法让 getElementsByClassName 在点击时显示其余的 li 项目。

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navList = document.getElementsByClassName('nav-list')[0]

toggleButton.addEventListener('click', () => 
  navList.classList.toggle('active')
)

/* Nav Styling */

.navbar-links ul 
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
  font-weight: 600;
  font-size: 18px;


.navbar-links li 
  list-style-type: none;


.navbar-links li a 
  text-decoration: none;
  color: whitesmoke;
  padding: 1rem;
  display: block;


.navbar-links li:hover 
  background-color: #555;


.nav-icon li 
  display: none;



/* When menu icon clicked, javascript shows nav items */

@media screen and (max-width: 740px) 
  /* Responsive Navbar */
  .nav-icon li 
    display: block;
  
  .nav-list li 
    display: none;
  
  .nav-list ul 
    flex-direction: column;
    width: 100%;
  
  .nav-list li 
    text-align: center;
  
  .nav-list li a 
    padding: .5 rem 1 rem;
  
  /* For Javascript */
  .nav-list.active 
    display: flex;
    flex-direction: column;
  

<nav class="navbar">
  <div class="navbar-links">
    <ul class="nav-icon" id="nav-icon">
      <li>
        <a href="#" class="toggle-button">
          <i class="fa fa-bars"></i>
        </a>
      </li>
    </ul>
    <ul class="nav-list">
      <li><a href="index.html">HOME</a></li>
      <li><a href="activities.html">SELF-HELP TOOLS</a></li>
      <li><a href="conditions.html">CONDITIONS</a></li>
      <li><a href="resources.html">RESOURCES</a></li>
      <li>
        <a href="contacts.html">CONTACT</a>
      </li>
    </ul>
  </div>
</nav>

【问题讨论】：

您的 nav-list li 是 display: none 而不是 nav-list 这是它不显示的原因。将 display: none 属性更改为 nav-list

我希望 nav-icon 中的图标充当按钮，当屏幕为 740px 或更少时，显示 nav-list 中的列表项。从 nav-list 中删除 li 同时显示列表和图标，当我单击图标时，它会从一行变为一列，而不是在较小的屏幕尺寸下单击时仅显示一列。

【参考方案1】：

这就是你想要的吗：当你点击菜单图标（这里给出为A）时，列表配置会在随后的点击中逐行更改。

那么你应该（不仅仅是因为上面说的）而是display: none在nav-list而不是nav-list li，因为在你的JavaScript中function你是togglingactive在nav-list而不是@987654329 @.

更改 CSS 或更改 JavaScript 函数由您决定

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navList = document.getElementsByClassName('nav-list')[0]

toggleButton.addEventListener('click', () => 
  navList.classList.toggle('active')
)

/* Nav Styling */

.navbar-links ul 
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-around;
  font-weight: 600;
  font-size: 18px;


.navbar-links li 
  list-style-type: none;


.navbar-links li a 
  text-decoration: none;
  color: lightblue;
  padding: 1rem;
  display: block;


.navbar-links li:hover 
  background-color: #555;


.nav-icon li 
  display: none;



/* When menu icon clicked, javascript shows nav items */

@media screen and (max-width: 740px) 
  /* Responsive Navbar */
  .nav-icon li 
    display: block;
  
  .nav-list 
    display: none;
  
  .nav-list ul 
    flex-direction: column;
    width: 100%;
  
  .nav-list li 
    text-align: center;
  
  .nav-list li a 
    padding: .5 rem 1 rem;
  
  /* For Javascript */
  .nav-list.active 
    display: flex;
    flex-direction: column;
  

<nav class="navbar">
  <div class="navbar-links">
    <ul class="nav-icon" id="nav-icon">
      <li>
        <a href="#" class="toggle-button">
          <i class="fa fa-bars">A</i>
        </a>
      </li>
    </ul>
    <ul class="nav-list">
      <li><a href="index.html">HOME</a></li>
      <li><a href="activities.html">SELF-HELP TOOLS</a></li>
      <li><a href="conditions.html">CONDITIONS</a></li>
      <li><a href="resources.html">RESOURCES</a></li>
      <li>
        <a href="contacts.html">CONTACT</a>
      </li>
    </ul>
  </div>
</nav>

【讨论】：

正确我想使用 Javascript 显示导航列表项和 css 将列表项更改为较小屏幕上的列。如果我不清楚，我还是新手，很抱歉。

这是我粘贴代码或其他内容时您想要实现的目标

不完全。我想到了。我必须更改我的 javascript 函数并使用查询选择器来定位导航列表，以便将链接从行更改为列。感谢您的帮助。