Skip to content

Commit ef1ebf8

Browse files
dandgersondandgerson
committed
2-sliding-tree
1 parent 0a708da commit ef1ebf8

4 files changed

Lines changed: 45 additions & 45 deletions

File tree

‎2-ui/2-events/03-event-delegation/2-sliding-tree/solution.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
The solution has two parts.
1+
Решение состоит из двух шагов.
22

3-
1. Wrap every tree node title into `<span>`. Then we can CSS-style them on `:hover` and handle clicks exactly on text, because `<span>` width is exactly the text width (unlike without it).
4-
2. Set a handler to the `tree` root node and handle clicks on that `<span>` titles.
3+
1. Оборачиваем каждый узел дерева элементом `<span>`. Затем мы можем добавить стили CSS на `:hover` и обрабатывать клики только на тексте, т.к. ширина элемента `<span>` в точности совпадает с шириной текста.
4+
2. Устанавливаем обработчик на корневой узел дерева `tree` и ловим клики на элементах `<span>`, содержащих заголовки.

‎2-ui/2-events/03-event-delegation/2-sliding-tree/solution.view/index.html‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -17,60 +17,60 @@
1717
<body>
1818

1919
<ul class="tree" id="tree">
20-
<li>Animals
20+
<li>Животные
2121
<ul>
22-
<li>Mammals
22+
<li>Млекопитающие
2323
<ul>
24-
<li>Cows</li>
25-
<li>Donkeys</li>
26-
<li>Dogs</li>
27-
<li>Tigers</li>
24+
<li>Коровы</li>
25+
<li>Ослы</li>
26+
<li>Собаки</li>
27+
<li>Тигры</li>
2828
</ul>
2929
</li>
30-
<li>Other
30+
<li>Другие
3131
<ul>
32-
<li>Snakes</li>
33-
<li>Birds</li>
34-
<li>Lizards</li>
32+
<li>Змеи</li>
33+
<li>Птицы</li>
34+
<li>Ящерицы</li>
3535
</ul>
3636
</li>
3737
</ul>
3838
</li>
39-
<li>Fishes
39+
<li>Рыбы
4040
<ul>
41-
<li>Aquarium
41+
<li>Аквариумные
4242
<ul>
43-
<li>Guppy</li>
44-
<li>Angelfish</li>
43+
<li>Гуппи</li>
44+
<li>Скалярии</li>
4545
</ul>
4646
</li>
47-
<li>Sea
47+
<li>Морские
4848
<ul>
49-
<li>Sea trout</li>
49+
<li>Морская форель</li>
5050
</ul>
5151
</li>
5252
</ul>
5353
</li>
5454
</ul>
5555

5656
<script>
57-
// move all text into <span>
58-
// they occupy exactly the place necessary for the text,
57+
// обернуть весь текст элементом <span>
58+
// он занимает только то место, которое необходимо для текста
5959
for (let li of tree.querySelectorAll('li')) {
6060
let span = document.createElement('span');
6161
li.prepend(span);
62-
span.append(span.nextSibling); // move the text node into span
62+
span.append(span.nextSibling); // поместить текстовый узел внутрь элемента <span>
6363
}
6464

65-
// catch clicks on whole tree
65+
// ловить клики на всём дереве
6666
tree.onclick = function(event) {
6767

6868
if (event.target.tagName != 'SPAN') {
6969
return;
7070
}
7171

7272
let childrenContainer = event.target.parentNode.querySelector('ul');
73-
if (!childrenContainer) return; // no children
73+
if (!childrenContainer) return; // не на потомках
7474

7575
childrenContainer.hidden = !childrenContainer.hidden;
7676
}

‎2-ui/2-events/03-event-delegation/2-sliding-tree/source.view/index.html‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,36 @@
66
<body>
77

88
<ul class="tree" id="tree">
9-
<li>Animals
9+
<li>Животные
1010
<ul>
11-
<li>Mammals
11+
<li>Млекопитающие
1212
<ul>
13-
<li>Cows</li>
14-
<li>Donkeys</li>
15-
<li>Dogs</li>
16-
<li>Tigers</li>
13+
<li>Коровы</li>
14+
<li>Ослы</li>
15+
<li>Собаки</li>
16+
<li>Тигры</li>
1717
</ul>
1818
</li>
19-
<li>Other
19+
<li>Другие
2020
<ul>
21-
<li>Snakes</li>
22-
<li>Birds</li>
23-
<li>Lizards</li>
21+
<li>Змеи</li>
22+
<li>Птицы</li>
23+
<li>Ящерицы</li>
2424
</ul>
2525
</li>
2626
</ul>
2727
</li>
28-
<li>Fishes
28+
<li>Рыбы
2929
<ul>
30-
<li>Aquarium
30+
<li>Аквариумные
3131
<ul>
32-
<li>Guppy</li>
33-
<li>Angelfish</li>
32+
<li>Гуппи</li>
33+
<li>Скалярии</li>
3434
</ul>
3535
</li>
36-
<li>Sea
36+
<li>Морские
3737
<ul>
38-
<li>Sea trout</li>
38+
<li>Морская форель</li>
3939
</ul>
4040
</li>
4141
</ul>

‎2-ui/2-events/03-event-delegation/2-sliding-tree/task.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ importance: 5
22

33
---
44

5-
# Tree menu
5+
# Раскрывающееся дерево
66

7-
Create a tree that shows/hides node children on click:
7+
Создайте дерево, которое по клику на заголовок скрывает-показывает потомков:
88

99
[iframe border=1 src="solution"]
1010

11-
Requirements:
11+
Требования:
1212

13-
- Only one event handler (use delegation)
14-
- A click outside the node title (on an empty space) should not do anything.
13+
- Использовать только один обработчик событий (применить делегирование)
14+
- Клик вне текста заголовка (на пустом месте) ничего делать не должен.

0 commit comments

Comments
 (0)