显示 JavaScript 的隐藏列表

Question

我想 show/hide 单击输入时列表中的项目。该页面需要以未显示的列表开始，但代码仅在以显示的列表开始时才有效。

function fAbreGuias() {
  var vGuias = document.getElementById('guias');
  if (vGuias.style.display == "block") { // if vGuias hidden, display it 
    vGuias.style.display = "none";
  } else { // if vGuias displayed, hidden it
    vGuias.style.display = "block";
  }
}

ul#guias li {
  display: block;
}

<nav id="menu">
  <input type="image" src="_imagens/menuesboco.png" onclick="fAbreGuias()" />
  <ul id="guias">
    <li>Guia 1</li>
    <li>Guia 2</li>
    <li>Guia 3</li>
  </ul>
</nav>

Answer 1

在您的 css 中，我可以看到您在 # 中添加了 ul。它应该只是#guias

Answer 2

这可能会有所帮助...

 function fAbreGuias() {
    var vGuias = document.getElementById('guias');
        if (vGuias.style.display == "block"){ // if vGuias hidden, display it 
            vGuias.style.display = "none";
        }
        else{ // if vGuias displayed, hidden it
            vGuias.style.display = "block";
        }
    }

ul#guias{display :none;}
ul#guias li {
    display: block;
}

<nav id="menu">
    <input type="image" src="_imagens/menuesboco.png" onclick="fAbreGuias()"/>
    <ul id="guias">
        <li>Guia 1</li>
        <li>Guia 2</li>
        <li>Guia 3</li>
    </ul>
</nav>

Answer 3

将您的 CSS 替换为以下内容，您定位的元素有误。

ul#guias{
  display: none;
}

Answer 4

样式显示属性用于通过使用 JavaScript/jQuery 访问 DOM 元素来隐藏和显示 HTML DOM 的内容。要隐藏元素，请将样式显示属性设置为“none”。 document.getElementById("element").style.display = "none";要显示元素，请将样式显示属性设置为“块”

Answer 5

问题是css。添加另一个标记为 ul#guias 的样式并将显示设置为 none.

Answer 6

设置显示：none；要隐藏您的列表，必须显示父元素 ul 的 id：none；这样当点击输入时，所需的功能就会生效。

Answer 7

要隐藏元素，请将样式显示属性设置为“none”。 document.getElementById("element").style.display = "none"; 要显示元素，请将样式显示属性设置为 “块”

Answer 8

隐藏列表

document.querySelector('#guias').style.display = 'none';

显示列表

document.querySelector('#guias').style.display = 'block';

显示 JavaScript 的隐藏列表

Display hidden list with JavaScript

html

javascript

css

display