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";
}

Answer 2

您将 DOM 元素拼错为getElementByClass它应该是getElementsByClassName并且您还可以使用querySelector ，这有时很有帮助。

这是我为这两个事件更新的代码。

 .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; }

 <script> function openNav() { document.querySelector(".nav").style.width = "250px"; } function closeNav() { document.querySelector(".nav").style.width = "0px"; } </script> <button onClick="openNav()">Open Nav</button> <button onClick="closeNav()">Close Nav</button> <ul class="nav"> <li><a href="{% url 'sheets:list' %}" class="">Nav Element</a></li> </ul>

Answer 3

你可以这样做

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

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

  </ul>

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

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

和宽度会改变，但你看不到它所以改变字体大小