“滑动菜单”的问题程序
我正在阅读一个制作滑动菜单的程序。尽管该程序运行良好，但有些事情我不知道它们是什么意思以及它们在做什么。
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 & 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 Script
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 代码中：
-
这 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返回什么？
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
该代码位于 toggleMenu 函数中，该函数被分配给链接元素（它们可能是菜单中的项目）的 onclick 侦听器。当 onclick 处理程序调用该函数时，该函数的 this 关键字被设置为对该元素（即链接）的引用。所以第一行是获取 href 属性中最后一个“/”的位置，第二行是获取最后一个“.”的索引。在href中。
它是对链接的 href 属性的引用，该属性最初设置为 href 属性的值。
它将元素样式对象的显示属性值更改为“block”，这是根据 CSS 2.1 规范。更好的策略是在 CSS 中设置显示属性（或仅使用默认值），并在代码中将其设置为“”（空字符串），以便它采用默认或级联样式（可以是 13 个值中的任意一个，并且可能在不同的浏览器中会有所不同，因此具体设置它可能是一个问题）。
这样，布局和显示就独立于代码，代码只是将其隐藏或将其返回到原来的状态。
这使得该元素不是文档流的一部分，有效地隐藏了它，这意味着它不会对文档布局产生任何影响。
它返回对元素样式对象的引用，它用于使代码更简洁（并且可能更快一点，但您不会在这里注意到）。
That code is within the toggleMenu function that is assigned to an onclick listener of link elements (they are probably the items in your menu). When the function is called by the onclick handler, the function's this keyword is set to a reference to the element (i.e. the link). So the first line is getting the position of the last '/' in the href property, the second is getting the index of the last "." in the href.
It is a refernce to the link's href property, which is initially set to the value of the href attribute.
It is changing the value of the display property of the element's style object to "block", which is one value that it may have according to the CSS 2.1 specification. A better strategy is to set the display property in CSS (or just use the default) and in code set it to "" (empty string) so that it adopts the default or cascaded style (which can be any one of 13 values and might be different in different browsers so setting it specifically can be an issue).
That way the layout and display are independent of the code, which just hides it or returns it to whatever it was.
That makes the element not part of the document flow, effectively hiding it and meaning it doesn't have any effect on the document layout.
It returns a reference to the element's style object, it's used to make the code more concise (and likely a tad faster, not that you'd notice here).