展開JavaScript的菜單

誰能告訴我爲什麼這個功能下降到頁面的頂部？展開JavaScript的菜單

任何想法如何解決這個問題？

或任何建議的更好的代碼使用？

P.S.這是爲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>

來源

2012-07-17 Arturas Strazdas

你爲什麼不只是簡化了嗎？你可以只嘗試：

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

，改變你的JS到：

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

這是簡單得多。

編輯：或者你只是用href="javascript:return(false);"替換href="#"。由於#是對不存在的錨點的引用，因此它會將您帶到頁面的頂部。

來源

2012-07-17 02:54:21

謝謝Birk，href =「javascript：return（false）;」按我想要的方式工作。 – 2012-07-17 03:15:22

另外我嘗試使用這個簡單的方法，但它不適合我。請你能發佈更詳細的例子嗎？我是新的JavaScript。我想堅持舊的，當物品列出ebay不要讓Javascript工作。它在促銷箱中工作很好。奇怪.... – 2012-07-17 21:07:14

發現問題，你不能在列表中使用java。 – 2012-07-19 18:44:31

這裏我使用jQuery做斌：

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

嘗試在斌：http://codebins.com/bin/4ldqpal

來源

2012-07-17 08:18:44 gaurang171

嗨，我沒有Ebay讓你使用jquery，並添加標頭？ – 2012-07-17 11:27:35

展開JavaScript的菜單

回答

相關問題