0

每当我单击菜单项时，每个菜单项上的子菜单都会在主菜单项下方滑动，而不是滑出，这是它应该做的。问题是网站本身会自动向上滚动。就好像主菜单项有一个指向它们的链接，该链接锚定在站点的顶部。我点击它们，子菜单滑出，但网站本身每次都会向上滚动。

如何让代码跨浏览器兼容？

javascript代码：

 <script type="text/javascript">
 <!--//--><![CDATA[//><!--
 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>

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>

基于此菜单：http ://www.pmob.co.uk/temp/drop-down-expand.htm#

4

2 回答 2

1

原因是你的hrefs中有“#”...这是告诉浏览器返回顶部。您需要在 onclick 上返回 false，以便默认行为（导航到 href）不会发生在不是真正“链接”的项目上。

于 2013-05-31T04:09:19.270 回答
0

您可以随时添加e.preventDefault()到事件侦听器以在单击后删除所有超链接效果。

preventDefault通常更推荐使用。

http://jsfiddle.net/Z8Uvj/

$("a").click(function(e){
    //your stuff
    e.preventDefault();
});
于 2013-05-31T04:34:20.077 回答