Вертикальное меню слайдов 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. Это говорит браузеру вернуться к вершине. Вы должны вернуть false в свой onclick, чтобы поведение по умолчанию (переход на href) не происходило на элементах, которые не являются действительно «ссылками».

Answer 2

Вы всегда можете добавить e.preventDefault() к прослушивателю событий, чтобы удалить все гиперссылки после нажатия.

Использование preventDefault обычно рекомендуется.

http://jsfiddle.net/Z8Uvj/

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