垂直CSS幻燈片菜單可在點擊時向上推動網站

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();
});