unhide elements on click

问题

I've got a little issue with JavaScript. I am not sure if my code not work, or if I am about lunch it wrong way.

<title>Untitled Document</title>
<script language="javascript">
function Unhide()
{
 var item = document.getElementsByTagName('p');
 for (x; x > item.length; x+1)
 {
     if (item.item(x).getAttribute('hidden') == ('true'))
     {
        item.item(x).setAttribute('hidden', 'false');
     }
     else
     {
         item.item(x).setAttribute('hidden', 'true');
     }
 }
}
</script>
</head>

<body>
<div class="Level1">
 <p class="Menu"><a href=".\Index.html">Home</a></p>
  <div class="Level2">
   <p class="Menu"><a href=".\Artykol1.html">Artykół 1</a></p>
   <p class="Menu"><a href=".\Artykol2.html">Artykół 2</a></p>
   <p class="Menu"><a href=".\Artykol3.html">Artykół 3</a></p>
   <p class="Menu"><a href=".\Autorska.html">Artykóły Autorskie</a></p>
  </div>   
 <p class="Menu"><a href=".\Dziennik.html">Dziennik</a></p>
 <p class="Menu"><a href=".\Archiwum.html">Archiwum</a></p>
 <div class="Level2">
  <p class="Menu"><a onclick="Unhide()">Ostatni Tydzień</a></p>
  <div class="Level3">
   <p class="Menu" hidden="true"><a href=".\Archiwum\OstatniTydzien\Art1_Autor.html">Art1</a></p>
   <p class="Menu" hidden="true"><a href=".\Archiwum\OstatniTydzien\Art2_Autor.html">Art2</a></p>
  </div>
 </div>
</div>
</body>

Could you give me any tip, how to figure it out?

回答1:

http://davidwalsh.name/html5-hidden

<script>
function Unhide()
{
 var items = document.getElementsByTagName('p');
 for ( var x = 0; x < items.length; x++)
 {
     var item = items[x]; 
     if (item.getAttribute('hidden') == 'true')
     {
        item.setAttribute('hidden', 'false');
     }
     else
     {
         item.setAttribute('hidden', 'true');
     }
 }
}
</script>

<div class="Level1">
 <p class="Menu"><a href=".\Index.html">Home</a></p>
  <div class="Level2">
   <p class="Menu"><a href=".\Artykol1.html">Artykół 1</a></p>
   <p class="Menu"><a href=".\Artykol2.html">Artykół 2</a></p>
   <p class="Menu"><a href=".\Artykol3.html">Artykół 3</a></p>
   <p class="Menu"><a href=".\Autorska.html">Artykóły Autorskie</a></p>
  </div>   
 <p class="Menu"><a href=".\Dziennik.html">Dziennik</a></p>
 <p class="Menu"><a href=".\Archiwum.html">Archiwum</a></p>
 <div class="Level2">
  <p class="Menu"><a onclick="Unhide()">Ostatni Tydzień</a></p>
  <div class="Level3">
   <p class="Menu" hidden="true"><a href=".\Archiwum\OstatniTydzien\Art1_Autor.html">Art1</a></p>
   <p class="Menu" hidden="true"><a href=".\Archiwum\OstatniTydzien\Art2_Autor.html">Art2</a></p>
  </div>
 </div>
</div>

回答2:

function Unhide()
{
 var items = document.getElementsByTagName('p');
 for (var x in items)
 {
     if (x.style.display == 'none')
     {
        x.style.display = '';
     }
     else
     {
         x.style.display = 'none';
     }
 }
}

items is an array of elements. iterate through them with a for loop and set style.display property.

Reference: http://www.w3schools.com/jsref/prop_style_display.asp

来源：https://stackoverflow.com/questions/19303055/unhide-elements-on-click

标签

javascript

html

onclick

hidden