js做下拉列表的一些疑问

看书中，遇到了不明白的地方：html的div中对于链接menu1.html，当onclick动作发生时，是转到新的页面吗，如果是的话，是否还得做一个menu1.html的页面来保证操作的完成？[ps:怕不明白，把代码都贴出来了，谢谢你们的耐心！]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shakespeare's Plays</title>
    <link rel="stylesheet" type="text/css" href="slide_menu.css">
    <script src="slide_menu.js"></script>
</head>
<body>
    <h1>Shakespware's Plays </h1>
    <div>
        <a href="menu1.html" class= 'menuLink'>Music</a>
        <ul class='menu' id='menu1'>
            <li><a href="pg1.html">dida.dida</a></li>
            <li><a href="pg2.html">tuli.tuli</a></li>
            <li><a href="pg2.html">poli.poli</a></li>
        </ul>

    </div>
</body>
</html>

ul.menu {

display: none;
list-style-type: none;
margin-top: 10px;

}

window.onload = initAll;

function initAll () {

var allLinks = document.getElementsByTagName('a');
for (var i = 0; i < allLinks.length; i++) {
    if(allLinks[i].className.indexOf('menuLink')>-1){
        allLinks[i].onclick = toggleMenu;
    }
}

}

function toggleMenu () {

var startMenu = this.href.lastIndexOf('/')+1;
var stopMenu = this.href.lastIndexOf('.');

var thisMenuName = this.href.substring(startMenu,stopMenu);
var thisMenu = document.getElementById('thisMenuName').style;

if(thisMenu.display == 'block'){
    thisMenu.display = 'none';

}
else{
    thisMenu.display = 'block';
}
return false;

}

你要天转到其他页面的话肯定要有一个新的页面，如果不想跳转到新页面，仅仅只想完成onclick事件函数的话就在函数里加return false

1，你的目的是做下拉列表，应该是防止跳转而相应事件显示下拉列表，应该是要阻止a标签的默认跳转行为
2，通过在onclick事件响应中添加 return false;可以防止链接跳转。
3，当然实现阻止a标签默认行为的方法不止这一种，比如：

1.在onclick事件中调用这个函数

function preventDefault(e){
  if(e.preventDefault){
    e.preventDefault();
  }else{
    window.event.returnValue=false;
  }
}

2.a标签中的href设置成javascript:void(0)

4，这里的menu1.html有没有没有关系，不用担心

以上是我个人理解，不对的地方请指正

【热门文章】