Question

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

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

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#

Answer 1

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

Answer 2

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

通常更推荐使用preventDefault。

http://jsfiddle.net/Z8Uvj/

$("a").click(function(e){
    //your stuff
    e.preventDefault();
});

垂直CSS幻灯片菜单点击即可推送网站

2 个答案: