Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
 
0 / 0 / 0
Регистрация: 14.06.2018
Сообщений: 49
1

У меня не работают скрипты. Уже даже копирую их а НЕ пишу, все равно не грузятся на странице

06.05.2020, 18:58. Просмотров 132. Ответов 3
Метки нет (Все метки)

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        document.getElementById('nav').onmouseover= function(event) {
    var target = event.target; // где был клик?
    if (target.className == 'menu-item') {
        var s=target.getElementsByClassName('submenu');
        closeMenu();
        s[0].style.display='block';
    }
}
document.onmousemove=function(event) {
    var target = event.target; // где был клик?
    console.log(event.target);
    if (target.className!='menu-item' && target.className!='submenu') {
        closeMenu();
    }
}
function closeMenu(){
    var menu=document.getElementById('nav');
    var subm=document.getElementsByClassName('submenu');
    for (var i=0; i<subm.length; i++) {
        subm[i].style.display="none";
    }
}
    </script>
    <div id="nav">
        <div class="menu-item">
            Меню 1
            <div class="submenu">
                Подменю
            </div>
        </div>
        <div class="menu-item">
            Меню 2
            <div class="submenu">
                Подменю
            </div>
        </div>
        <div class="menu-item">
            Меню 3
            <div class="submenu">
                Подменю
            </div>
        </div>
    </div>
</body>
</html>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
06.05.2020, 18:58
Ответы с готовыми решениями:

Не работают скрипты на странице
здравствуйте. такая проблема. установил плагин (или виджет, путаю) &quot;Календарь событий&quot;, после чего...

Всё пропало все команды не работают после ввода новой переменной окружения даже под root не зайти
как вернуть всё как было в ~/.bashrc ? Добавлено через 11 минут Уже починил.


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Эксперт HTML/CSS
1279 / 1074 / 465
Регистрация: 07.08.2016
Сообщений: 2,954
06.05.2020, 19:33 2
Sonya123456789, у вас скрипт пытается получить элементы когда страница еще не загрузилась и этих элементов еще нет. Поместите скрипт перед закрывающим тегом body и все заработает.
0
0 / 0 / 0
Регистрация: 14.06.2018
Сообщений: 49
06.05.2020, 20:02  [ТС] 3
Спасибо, заработало, а вот тут не могли бы подсказать? Тут такая же проблема только пред. был с сайта, а этот мой скрипт

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/menu-child-child.css">
    <link rel="stylesheet" href="css/clean.css">
    
    <title>Online Textbook</title>
</head>
<body>
    <div class="hover">
        <div class="main">
            <div class="logo">
                <h1><a href="#" class="change-main">Online Textbook</a></h1>
                <div class="menu">
                    <ul class="menu-child">
                        <li class="indent"><a class="change" href="#">Об учебнике</a></li>
 
 
                        <li class="indent"><a class="change" href="#">Практические работы</a>
                            <ul class="menu-child-child">
                                <li><a href="#">ffffffffff</a></li>
                            </ul>
                        </li>
 
 
 
 
                        <li class="indent"><a class="change" href="#">Тестирование</a>
                            <ul class="menu-child-child">
                                <li><a href="#">fffffffffff</a></li>
                            </ul>
                        </li>
 
                        <li class="indent"><a class="change" href="#">Дополнительная информация</a>
                            <ul class="menu-child-child">
                                <li><a href="#">ffffff</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    <script>
        var el document.getElementByClassName('menu-child');
    for (var i=0; i<element.length; i++;)
    el[i].addEventListener('mouseenter', showSub, false);
    el[i].addEventListener('mouseleave', hideSub, false);
 
    function showSub() {
        if (this.children.length>1) {
            this.children[1].style.height = "auto";
            this.children[1].style.height = "opacity";
            this.children[1].style.height = "visible";
        }
        else {
            return: false;
        }
    }
    </script>
CSS
1
2
3
.menu-child-child {
    [overflow: hidden; height: 0; opacity: 0; transition: all 0.5s; ease-in;]
}
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
body {
    margin: 0;
    font-family: Roboto, sans-serif;
}
 
.hover {
    display: flex;
    justify-content: center;
}
 
.main {
    margin: 35px 35px 35px 35px;
    
}
 
.logo {
display: flex;
 
}
 
.change-main {
    color: black;
    text-transform: uppercase;
    text-decoration: none;
    /*font-size: 0.9em;*/
}
 
.menu {
    padding: 0px 0px 0px 200px;
}
 
.menu-child {
    display: flex;
}
 
.indent {
    display: block;
    padding: 0px 15px 0px 0px;
}
 
.change {
    text-transform: uppercase;
    text-decoration: none;
    color: black;
    font-size: 11.5px; 
    letter-spacing: 2px; /*Отступы между букв*/
}
0
Эксперт HTML/CSS
1279 / 1074 / 465
Регистрация: 07.08.2016
Сообщений: 2,954
06.05.2020, 20:29 4
Цитата Сообщение от Sonya123456789 Посмотреть сообщение
var el document.getElementByClassName('menu-child');
нет знака присваивания после el.
Пропущена буква getElementsByClassName
Цитата Сообщение от Sonya123456789 Посмотреть сообщение
for (var i=0; i<element.length; i++;)
Убрать ; после i++
Нужно el.length вместо element.length
Цитата Сообщение от Sonya123456789 Посмотреть сообщение
this.children[1].style.height = "auto";
this.children[1].style.height = "opacity";
this.children[1].style.height = "visible";
Это вообще что? Откуда у height появились значения opacity и visible ?
Цитата Сообщение от Sonya123456789 Посмотреть сообщение
return: false;
Убрать : после return
0
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.