javascript - UL 元素宽度不随 JS 改变

Question

我目前有一个 ul 作为导航栏。我希望通过更改宽度来单击按钮打开它，但它不起作用。单击按钮时没有任何反应，但是它应该改变宽度并使 ul 出现。

function openNav() {
            document.getElementByClass("nav").style.width = "250px";
        }

        function closeNav() {
            document.getElementByClass("nav").style.width = "0px";
        }

.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 0;
  background-color: #f1f1f1;
  height: 100%; /* Full height */
  position: fixed; /* Make it stick, even on scroll */
  overflow: auto; /* Enable scrolling if the sidenav has too much content */
  transition: 0.5s;
}

.nav li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

<button onclick="openNav()">Open Nav</button>

    <ul class="nav">
        <li><a href="{% url 'sheets:list' %}" class="">Nav Element</a></li>
    </ul>

Answer 1

没有 getElementByClass() 这样的东西，您应该改用 getElementsByClassName()，就像下面的代码示例:

function openNav() {
  document.getElementsByClassName("nav")[0].style.width = "250px";
 }

function closeNav() {
  document.getElementsByClassName("nav")[0].style.width = "0px";
}