「滑動菜單」程序的問題

我正在讀一個程序來製作滑動菜單。雖然程序運行良好，但有些事情我不知道他們的意思是什麼，他們在做什麼。「滑動菜單」程序的問題

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

「滑動菜單」程序的問題

回答

相關問題