проблемы с программой "раздвижные меню" - PullRequest
0 голосов
/ 26 сентября 2011

Я читал программу для создания скользящих меню. Хотя программа работает нормально, есть некоторые вещи, для которых я понятия не имею, что они означают и что они делают.

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 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:

  1. что делают эти 2 утверждения?

    var startMenu = this.href.lastIndexOf("/")+1;
        var stopMenu = this.href.lastIndexOf(".");
    
  2. что означает this.href. Я знаю, что this относится к ссылке, но что означает href?
  3. что означает утверждение thisMenu.display == "block"? Я хочу сказать, что такое display и что такое block. Код нигде не объявляет.
  4. Точно так же, что подразумевается под none?
  5. Что возвращает выражение document.getElementById(thisMenuName).style?

1 Ответ

1 голос
/ 26 сентября 2011
1. what do these 2 statements do ?

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

Этот код находится в функции toggleMenu , которая назначается для прослушивателя щелчка элементов ссылки (это, вероятно, элементы в вашем меню).Когда функция вызывается обработчиком 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 .Лучшая стратегия состоит в том, чтобы установить свойство отображения в CSS (или просто использовать значение по умолчанию), а в коде установить его "" (пустая строка), чтобы оно принимало стиль по умолчанию или каскадный (который может быть любым из 13 значений иотличаться в разных браузерах, поэтому его установка может быть проблемой).

Таким образом, компоновка и отображение не зависят от кода, который просто скрывает его или возвращает к тому, что был.

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

Это делает элемент нечасть потока документа, эффективно скрывая его и означая, что он не влияет на макет документа.

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

Возвращает ссылку на объект стиля элемента, он используетсячтобы сделать код более кратким (и, возможно, чуть быстрее, не то, что вы заметили бы здесь).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...