javascript 当我点击一个链接/按钮时，如何改变CSS显示属性？

dwbf0jvd 于 2023-02-02 发布在 Java

关注(0)|答案(2)|浏览(128)

我有一个名为“menu-list”的ul，我在CSS文件中将display属性设置为“none”，但是我希望在单击链接时将其更改为“flex”。
我正在使用链接上的click事件来触发display属性的更改，但是当我单击它时没有任何React。
当在myFunction（）中将display属性的值记录到控制台时，我在控制台中只得到一个空白日志，没有显示任何值。
我哪里做错了？

let menuList = document.getElementById("menu-list");

function myFunction() {
  console.log(menuList.style.display);

  if (menuList.style.display === "none") {
    menuList.style.display = "flex";
  } else {
    menuList.style.display = "none";
  }
}

#menu-list {
  display: none;
}

<div class="container">
  <div class="inner">
    <nav id='menu'>
      <div class="logo">
        <img src="src/assets/images/hp-logos_white.png" alt="logo" class="fluid">
      </div>
      <ul id="menu-list">
        <li class="menu-list-item"><a href="">Home</a></li>
        <li class="menu-list-item"><a href="">Home</a></li>
        <li class="menu-list-item"><a href="">Home</a></li>
      </ul>
      <a href="" class="icon" onclick="myFunction()">
        <i class="fa fa-bars"></i>
      </a>
    </nav>
  </div>
</div>

JavaScript

来源：https://stackoverflow.com/questions/75311856/how-can-i-change-the-css-display-property-when-clicking-on-a-link-button

2条答案

按热度按时间

7vux5j2d1#

这里有几个问题：
您使用锚而不是按钮，因此它会将您重定向到一个新的网站。
那么答案就解释了为什么你的切换不起作用。然而，现代的解决方案是简单地切换一个CSS类：

const menuList = document.getElementById("menu-list");
const button = document.querySelector('button');

button.addEventListener('click', function() {
  menuList.classList.toggle('d-flex')
})

[id="menu-list"] {
  display: none;
}

.d-flex {
  display: flex;
}

<div class="container">
  <div class="inner">
    <nav id='menu'>
      <div class="logo">
        <img src="src/assets/images/hp-logos_white.png" alt="logo" class="fluid">
      </div>
      <ul id="menu-list">
        <li class="menu-list-item"><a href="">Home</a></li>
        <li class="menu-list-item"><a href="">Home</a></li>
        <li class="menu-list-item"><a href="">Home</a></li>
      </ul>
      <button>
        Click to toggle
      </button>
    </nav>
  </div>
</div>

赞(0）回复(0）举报 2023-02-02

p5fdfcr12#

切换比较的顺序，因为最初没有在元素上设置内联样式。

let menuList = document.getElementById("menu-list");
function myFunction() {
  if (menuList.style.display === "flex") {
    menuList.style.display = "none";
  } else {
    menuList.style.display = "flex";
  }
}

#menu-list {
  display: none;
}

<div class="container">
  <div class="inner">
    <nav id='menu'>
      <div class="logo">
        <img src="src/assets/images/hp-logos_white.png" alt="logo" class="fluid">
      </div>
      <ul id="menu-list">
        <li class="menu-list-item"><a href="">Home</a></li>
        <li class="menu-list-item"><a href="">Home</a></li>
        <li class="menu-list-item"><a href="">Home</a></li>
      </ul>
      <a class="icon" onclick="myFunction()">
        <i class="fa fa-bars">Click</i>
      </a>
    </nav>
  </div>
</div>

赞(0）回复(0）举报 2023-02-02

我来回答

javascript 当我点击一个链接/按钮时，如何改变CSS显示属性？

2条答案

相关问题

热门标签

最新问答