Question

以下是我长期坚持的代码..

<ul class="list">
   <li> </li>
   <li><p>qwerty</p> </li>
   <li style="display:none;"> </li>
   <li style="display:none;"> </li>
</ul>

在单独的文件中：

function plusArg() {
var ul = document.getElementsByClassName('list')[0];
for(var i = ul.childNodes.length; i--;){
if(ul.childNodes[i].nodeName === 'LI' )
ul.childNodes[i].toggle('fade',1000);
//ul.childNodes[i].innerHTML = 'test' ;
}
}

当我调用plusArg（）函数时没有符号：/（测试行在取消注释时运行）。我搜索谷歌为什么切换不会与childNodes运行，但没有答案。我想这有一个很好的理由，但你知道吗？如果没有办法以我想要的方式做到这一点，我怎么能以不同的方式做到这一点？最终目标是通过单击一个独特的按钮显示一堆未显示的lis。

提前致谢！

Answer 1

这是如何使用jQuery实现的：

<a href="#a" id="button">Toggle</a>
<ul class="list">
   <li>first</li>
   <li><p>qwerty</p></li>
   <li style="display:none;">Third</li>
   <li style="display:none;">Fourth</li>
</ul>

$("#button").on("click",function(){
    $(".list li").each(function(){
        $(this).fadeToggle( "slow", "linear" );
    });
});

小提琴：http://jsfiddle.net/qho65ov4/

Answer 2

谢谢Albert Kuzmin！我设法实现了我想要的代码！这是代码：

<a href="#a" id="button">Toggle</a>
<ul class="list">
   <li>First</li>
  <li>Second</li>
  <li style="display:none;">Third</li>
  <li style="display:none;">Fourth</li>
  <li style="display:none;">Fifth</li>
  <li style="display:none;">Sixth</li>
</ul>

$("#button").on("click",function(){
   var index = 0;
   $(".list li").each(function(){
   if (!$(this).is(":visible") & index != 2){
       index++;
       $(this).fadeToggle( "slow", "linear" );
   }});
});

Jsfiddle：http://jsfiddle.net/qho65ov4/2/

childNodes上的.toggle（）/切换未显示的元素2乘2

2 个答案: