单击打开移动菜单

时间:2014-02-01 23:24:45

标签: javascript html

所以我对JS有点新鲜。我很感激你们能提供什么。到目前为止,我有一个下拉菜单,在单击链接时通过JS显示(通过将CSS proterty显示从none更改为block)。但是,当您链接到网站上的其他页面或刷新时,菜单会保持打开状态。我想我想要的是在刷新页面时重置所有内容。

我的JS如下:

function showOrHide(zap) {
 if (document.getElementById) {
  var abra = document.getElementById(zap).style;
  if (abra.display == "block") {
   abra.display = "none";
   } else {
   abra.display = "block";
  } 
  return false;
  } else {
  return true;
 }
}

HTML是:

<div id="menulines"><a href="#" onclick="return showOrHide('menulink');"><image id="menuicon" src="img/menulines.png" />Menus</a></div><!-- This is my activation link -->
<ul id="menulink" class="mobilemenu">
   <li class="item"><a class="active" href="#">Home</a></li>
   <li class="item"><a href="#" onclick="return showOrHide('menuabout');">About</a>
   <ul id="menuabout" class="mobilesub1">
      <li><a href="#">The Farm</a></li>
      <li><a href="#">Our Family</a></li>
   </ul>
   </li>
   <li class="item"><a href="#" onclick="return showOrHide('menuproducts');">Products</a>
   <ul id="menuproducts" class="mobilesub1">
      <li><a href="#" onclick="return showOrHide('menumeats');">Meats</a>
      <ul id="menumeats" class="mobilesub2">
         <li><a href="#">Beef</a></li>
         <li><a href="#">Chicken</a></li>
         <li><a href="#">Turkey</a></li>
      </ul>
   </li>
   <li><a href="#" onclick="return showOrHide('menuproduce');">Produce</a>
      <ul id="menuproduce" class="mobilesub2">
         <li><a href="#">Vegetables</a></li>
         <li><a href="#">Fruits</a></li>
      </ul>
   </li>
   <li><a href="#">Eggs</a></li>
   <li><a href="#">Bulk Foods</a></li>
   <li><a href="#">Candles</a></li>
</ul>
</li>
<li class="item"><a href="#">Contact</a></li>
</ul>

提前致谢,期待学习。

0 个答案:

没有答案