Question

我正在阅读一个程序来制作滑动菜单。虽然该程序运行良好，但有些事情我不知道它们的含义是什么以及它们在做什么。

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代码中：

这两个陈述是做什么的？

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返回什么？

Answer 1

1. what do these 2 statements do ?

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

该代码位于 toggleMenu 函数中，该函数分配给链接元素的onclick侦听器（它们可能是菜单中的项目）。当onclick处理程序调用该函数时，函数的 this 关键字被设置为对元素的引用（即链接）。所以第一行是获取href属性中最后一个'/'的位置，第二行是获取最后一个'。'的索引。在href。

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

href表示什么？

这是对链接的href属性的引用，该属性最初设置为 href 属性的值。

3. what does the statement thisMenu.display == "block" mean ? I mean
说什么是显示和什么是块。代码没有声明它在任何地方。

它正在将元素的样式对象的display属性值更改为“block”，这是根据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 ?

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

“滑动菜单”程序的问题

1 个答案: