0

Here is the code I'm stuck with for too long..

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

In a separated file:

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

No sign when I call the plusArg() function :/ (the test line runs when uncommented). I searched on google why toggle would not run with childNodes but no answers. I guess there's a good reason but do you know it ? And if there is no way to do what I want this way, how could I do it differently ? The final goal is to display a bunch of ten more lis undisplayed by clicking an unique button.

Thanks in advance !

4

2 回答 2

0

谢谢阿尔伯特库兹明！感谢您的代码，我设法实现了我想要的！这是代码：

<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/

于 2014-11-23T08:31:28.197 回答
0

这是使用 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/

于 2014-11-22T23:46:46.067 回答