javascript - 展开 JAVASCRIPT 菜单

Question

谁能告诉我为什么这个功能掉到了页面的顶部？

任何想法如何解决这个问题？

或者有什么建议可以使用更好的代码？

PS这是ebay模板，相当大的菜单部分。

<script type="text/javascript">
startList = function() {

if (document.getElementById) {
    navRoot = document.getElementById("nav");
    for (i=0; i<navRoot.childNodes.length; i++) {
        node = navRoot.childNodes[i];
        if (node.nodeName=="LI") {
        node.onclick=function() {

    this.className = (this.className == "on") ? "off" : "on";

            }
        }
    }
 }
}
window.onload=startList;

</script>

我有一个基本的标记：

<ul id="nav">
  <li><a href="#">Home </a></li>
  <li><a href="#">About &gt;</a> 
    <ul>
      <li><a href="#">History </a></li>
      <li><a href="#">Team </a></li>
      <li><a href="#">Offices </a></li>
    </ul>
  </li>
  <li><a href="#">Services &gt;</a> 
    <ul>
      <li><a href="#">Web Design </a></li>
      <li><a href="#">Internet Marketing </a></li>
      <li><a href="#">Hosting </a></li>
      <li><a href="#">Domain Names </a></li>
      <li><a href="#">Broadband </a></li>
    </ul>
  </li>
  <li><a href="#">Contact Us &gt;</a> 
    <ul>
      <li><a href="#">United Kingdom</a></li>
      <li><a href="#">France</a></li>
      <li><a href="#">USA</a></li>
      <li><a href="#">Australia</a></li>
    </ul>
  </li>
</ul>

Answer 1

你为什么不把它简化一下？你可以试试：

<li><a href="javascript:List(this);">Home </a></li>

并将您的 JS 更改为：

function List(element)
{
    element.parentNode.className = (element.parentNode.className == "on") ? "off" : "on";
}

这要简单得多。

编辑：或者你只是替换href="#"为href="javascript:return(false);". 作为#对不存在的锚点的引用，它将带您到页面顶部。

Answer 2

在这里，我使用 jQuery 完成了 bin：

1) 首先在 html 标头标签中包含最新的 jquery.js 文件。

2）HTML：

<ul id="nav">
  <li>
    <a href="#">
      Home 
    </a>
  </li>
  <li>
    <a href="#">
      About &gt;
    </a>

    <ul>
      <li>
        <a href="#">
          History 
        </a>
      </li>
      <li>
        <a href="#">
          Team 
        </a>
      </li>
      <li>
        <a href="#">
          Offices 
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">
      Services &gt;
    </a>

    <ul>
      <li>
        <a href="#">
          Web Design 
        </a>
      </li>
      <li>
        <a href="#">
          Internet Marketing 
        </a>
      </li>
      <li>
        <a href="#">
          Hosting 
        </a>
      </li>
      <li>
        <a href="#">
          Domain Names 
        </a>
      </li>
      <li>
        <a href="#">
          Broadband 
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">
      Contact Us &gt;
    </a>

    <ul>
      <li>
        <a href="#">
          United Kingdom
        </a>
      </li>
      <li>
        <a href="#">
          France
        </a>
      </li>
      <li>
        <a href="#">
          USA
        </a>
      </li>
      <li>
        <a href="#">
          Australia
        </a>
      </li>
    </ul>
  </li>
</ul>

3）CSS样式：

ul#nav{
  background-color:#445566;
}
ul li{
  list-style:none;
}
ul li ul{
  background-color:#558888;
}
ul li a{
  color:#fff;
  text-decoration:none;
}
.off ul{
  display:none;
}
.on ul{
  display:block;
}

4）脚本标签中的JQuery：

$(function() {
    $("ul li ul").each(function() {
        $(this).parent().addClass('off');
    });
    $("ul li").mouseenter(function() {
        if ($(this).hasClass('off')) {
            $(this).removeClass('off');
            $(this).addClass('on');
        }
    });
    $("ul li").mouseleave(function() {
        if ($(this).hasClass('on')) {
            $(this).removeClass('on');
            $(this).addClass('off');
        }
    });
});

在 bin 上尝试： http: //codebins.com/bin/4ldqpal