当功能设置为将项目显示为块 onclick 时，列表项目显示为内联块答案

【问题标题】：List items displaying as inline block when function is set to display them as block onclick当功能设置为将项目显示为块 onclick 时，列表项目显示为内联块
【发布时间】：2022-02-13 14:50:04
【问题描述】：

所以我试图制作一个移动导航菜单，但是当我点击我的汉堡包时，会导致列表项显示为内联块，但该功能设置为将它们显示为块级元素。

HTML

<div class="nav-options">
  <i class="fas fa-bars" onclick="mobilenav()"></i>
  <ul id="myLinks">
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</div>

CSS

#myLinks {
    text-align: right;
}


#myLinks li {
    list-style: none;
    display: inline-block;
    padding: 0.5rem 2rem;
    font-size: 20px;
}

.nav-options i {
    display: none;
}

#myLinks li:hover {
    background-color: #ff3f05;
    cursor: pointer;
    transition: all 0.5s;
}

移动视图的 CSS：

.nav-options i {
    display: block;
    font-size: 25px;
    text-align: right;
}

.nav-options #myLinks {
    display: none;
    padding: 0px;
}

function mobilenav() {
    var links = document.getElementById("myLinks");
    if (links.style.display === "block") {
        links.style.display = "none";
      } else {
    links.style.display = "block";
  }
}

【问题讨论】：

标签： javascript html css

【解决方案1】：

当您分配<li> 元素的display 属性时，您正在控制<ul> 元素的显示属性。在下面的解决方案中，我从 CSS 文件中删除了 display 属性。页面加载时会触发load 事件，并且<ul> 元素和<li> 元素都被分配了display 样式。然后当<i>元素被点击时，click事件发生，display属性被切换。

let icon = document.getElementById("icon");
var linkContainer = document.getElementById("myLinks"); /* <ul> element */
var linkElements = document.querySelectorAll('li');     /* <li> elements */

window.addEventListener('load', (event) => {
  linkContainer.style.display = "block";
  
  linkElements.forEach(li => {
    li.style.display = "block";
  });
});

function log() {
  console.clear();
  console.log(`<ul> display style: ${linkContainer.style.display}`);
  console.log(`<li> display style: ${linkElements[0].style.display}`);
}

icon.addEventListener("click", function(e) {
  log();

  if(linkContainer.style.display === "block") 
    linkContainer.style.display = "none";
  else
    linkContainer.style.display = "block";
});

#myLinks {
  text-align: right;
}
#myLinks li {
  list-style: none;
  /* display: inline-block; */
  padding: 0.5rem 2rem;
  font-size: 20px;
}
.nav-options i {
  display: none;
}
#myLinks li:hover {
  background-color: #ff3f05;
  cursor: pointer;
  transition: all 0.5s;
}
.nav-options i {
  display: block;
  font-size: 25px;
  text-align: right;
}
.nav-options #myLinks {
  display: none;
  padding: 0px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="nav-options">
  <i id="icon" class="fas fa-bars"></i>
  
  <ul id="myLinks">  
    <li>Home</li>
    <li>About</li>
    <li>Contact</li>                
  </ul>
</div>

【讨论】：