“滑动菜单”程序的问题

我正在读一个程序来制作滑动菜单。虽然程序运行良好，但有些事情我不知道他们的意思是什么，他们在做什么。“滑动菜单”程序的问题

HTML

<html> 
<head> 
<title>Shakespeare's Plays</title> 
<link rel="stylesheet" href="script.css" /> 
<script type="text/javascript" src="script.js"> 
</script> 
</head> 
<body> 
<h1>Shakespeare's Plays</h1> 
<div> 
    <a href="menu1.html" class="menuLink">Comedies</a> 
    <ul class="menu" id="menu1"> 
     <li><a href="pg1.html">All's Well That Ends Well</a></li> 
     <li><a href="pg2.html">As You Like It</a></li> 
    </ul> 
</div> 
<div> 
    <a href="menu2.html" class="menuLink">Tragedies</a> 
    <ul class="menu" id="menu2"> 
     <li><a href="pg5.html">Anthony &amp; Cleopatra</a></li> 
     <li><a href="pg6.html">Hamlet</a></li> 
    </ul> 
</div> 
<div> 
    <a href="menu3.html" class="menuLink">Histories</a> 
    <ul class="menu" id="menu3"> 
     <li><a href="pg8.html">Henry IV, Part 1</a></li> 
     <li><a href="pg9.html">Henry IV, Part 2</a></li> 
    </ul> 
</div> 
</body> 
</html>

CSS

body { 
background-color: white; 
color: black; 
} 

div { 
padding-bottom: 10px; 
background-color: #6FF; 
width: 220px; 
} 

ul.menu { 
display: none; 
list-style-type: none; 
margin-top: 5px; 
} 

a.menuLink { 
font-size: 16px; 
font-weight: bold; 
} 

a { 
text-decoration: none; 
}

Java脚本

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

在javascript code：

这2条语句做了什么？

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

this.href是什么意思。我知道this指的是链接，但href表示什么？
声明thisMenu.display == "block"是什么意思？我的意思是说什么是display和什么是block。该代码不会在任何地方声明。
以同样的方式none是什么意思？
陈述document.getElementById(thisMenuName).style返回什么？

来源

2011-09-26 program-o-steve

1. what do these 2 statements do ? 

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

该代码是分配给链接元素的一个onclick听众的toggleMenu功能（他们很可能是在你的菜单中的项目）之内。当该函数被onclick处理程序调用时，该函数的这个关键字被设置为对元素（即链接）的引用。因此，第一行是获取href属性中最后一个'/'的位置，第二行获取最后一个“。”的索引。在href。

2. what does this.href mean . I know that this refers to the link but

是什么HREF表示？

这是一个refernce到链接的href属性，它最初设置为HREF属性的值。

3. what does the statement thisMenu.display == "block" mean ? I mean 
说什么是显示的，什么是块。该代码不会在任何地方声明。

它改变元素的样式对象的显示属性，以“块”，这是一个值，它可以根据CSS 2.1 specification具有值。更好的策略是在CSS中设置display属性（或者只使用默认值），并在代码中将其设置为“”（空字符串），以便它采用默认或级联样式（可以是13个值中的任何一个，在不同的浏览器中有所不同，因此具体设置可能会成为问题）。

这种方式的布局和显示是独立于代码，它只是隐藏它或将它返回到任何东西。

4. In the same way what is meant by none ?

这使得元素不是文档流程的一部分，从而有效地隐藏它，这意味着它不会对文档布局有任何影响。

5. What does the statement document.getElementById(thisMenuName).style return ?

它返回到元素的样式对象的引用，它是用来使代码更简洁（可能稍快一点，不是说你会注意到这里）。

来源

2011-09-26 07:07:07 RobG

为什么我不能只写'this.lastIndexof（“/”）' –

阅读我对你的第一个问题的答案，你可以回答你的自我。但以防万一：* this *引用DOM元素，它没有* lastIndexOf *属性。它**确实**具有* href *属性，其值是一个字符串，而字符串** do **具有* lastIndexOf *属性。 – RobG

“滑动菜单”程序的问题

回答

相关问题