Question

我在div类主要的ul li中列出了4个元素。我想在单击按钮时隐藏这些元素。我用下面的代码尝试了一下，但是只有第一个<li>元素在起作用

function toggle(id){
  var e = document.getElementById(id);
  
  if(e.style.display == 'none'){
    e.style.display = 'block';
  } else {
    e.style.display = 'none';
  }
}

.main ul {
  display: table;
  padding: 2px 20px;
}

.main ul li {
  display: none;
}

<div class="main">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</div>

<button class="btn" onclick="toggle(li)">hide</button>

我该如何解决？

Answer 1

您可以使用jquery进行隐藏和显示，如下所示。最初，您通过css将display none属性应用于li元素。它将在页面加载时隐藏元素。

<div class="main">
<li>one</li>
<li>two</li>
<li>three</li></ul></div>

<button class="btn" onclick="toggle()">hide</button>

.main ul{
  display:table;
  padding:2px 20px 2px 20px;
}

.main ul li{
  display:none;
}

function toggle(id) {

var e = $('ul')
if($('ul').is(":visible"))
   {
     $('ul').hide();
   }
else
   {
      $('ul').show();
   }
}

Answer 2

香草溶液 demo and code example

li是标签，而不是id。因此，您必须使用例如标记来获取元素

var elements = document.getElementsByTagName()

现在您不能直接使用elements，因为它是一个元素数组。因此，您需要迭代数组中的每个元素，例如像我一样使用for循环。然后，将当前元素分配给var，在我的情况下为element，并像以前一样创建if语句。

Answer 3

您的代码不起作用，因为您在函数中传递了ul，这没有任何意义，这就是为什么它不起作用的原因。

我已以最简单的方式修改了您的代码

var btn = document.querySelector('button');
var ul = document.querySelector('ul');

btn.onclick = function(){
  ul.classList.toggle('newClass');
}

.newClass {
  display: none;
}

<div class="main">
  <ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
  </ul>
</div>

<button class="btn">hide</button>

希望这会有所帮助。

有没有办法在单个javascript函数中实现多个类ID？

3 个答案: