Спойлер срабатывает со второго раза

@Ципихович Эндрю · Регистрация: 10.04.2009

Студворк — интернет-сервис помощи студентам

Здравствуйте, почему спойлер срабатывает после второго клика, и затем безперебойно, как уладить?

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
55
56
57
58
<!DOCTYPE html>
<!--html5-->
 
<html>
 
<head>
 
<meta http-equiv="content-type" content="text/html; charset=utf-8">
 
<!--
Сервис для проверки валидности сайта:
http://validator.w3.org/#validate_by_input
http://validator.w3.org/#validate_by_uri
-->
<title>Спойлер с JavaScript</title>
 
<script type="text/javascript">
function spoiler(id)
    {
        var obj = "";   
        // Проверить совместимость браузера
        if(document.getElementById)
            obj = document.getElementById(id).style;
        else if(document.all)
            obj = document.all[id];
        else if(document.layers)
            obj = document.layers[id];
        else
            return 1;
        // Пошла магия
        if(obj.display == "")
            obj.display = "none";
        else if(obj.display != "none")
            obj.display = "none";
        else
            obj.display = "block";
    }
</script>
 
<style type="text/css">
#content {
    display:none;
    background: #888444;
    width: 500px;
}
</style>
 
</head>
 
<body>
 
<p></p>
<a href="javascript://" onClick="spoiler('content');">Спойлер...</a>
<div id="content">Содержимое спойлера может быть любым: текст, картинки, флеш анимация, ссылки</div>
 
</body>
  
</html>

2 как поправить в строке

HTML5
1
<a href="javascript://" onClick="spoiler('content');">Спойлер...</a>

чтобы от валидатора не было сообщения Bad value javascript:// for attribute href on element a: missing } after function body
Спасибо

@Taatshi · 19.10.2012, 17:13

Ципихович Эндрю, одна тема - один вопрос.

@Ципихович Эндрю · 19.10.2012, 17:16 **[ТС]**

Сообщение от Ципихович Эндрю

почему спойлер срабатывает после второго клика, и затем безперебойно, как уладить

возможно после этого второй отпадёт

@kalabuni · 19.10.2012, 19:10

в вашей, вернее - не в вашей, а в найденной вами на какой-то интернет-помойке древней функции spoiler () - она из прошлого века, когда браузеры ещё проверялись на DOM-совместимость - так и написано: в первый раз ничего не делать, со второго раза - открывать/закрывать

вам не надоело изображать из себя гоголевского Плюшкина и всякий хлам в сети собирать?

держите нормальную работающую функцию:

JavaScript
1
2
function spoiler (objID)
{with (document.getElementById (objID).style) display = (display == 'block') ? 'none' : 'block'}

а чтобы валидатор не ругался, пишите так:
<a href="javascript: spoiler ('content')">Спойлер...</a>
или так
<a href="#" onClick="spoiler ('content'); return false">Спойлер...</a>

два подряд слеша - это на языке javascript открывает комментарий
вы, написав <a href="javascript://" onClick="spoiler('content');">Спойлер... </a>, сделали ВСЁ, что я выделл зелёным, javascript-комментарием
и даже не только это, а и весь последующий html-код в этой строке (если он там есть) стал javascript-комментарием

PS. и ещё хочу спросить
вижу ваши постоянные попытки угодить валидатору
он вам кто - этот Валидатор?
"он ваш папа - этот валидатор" (с) Паниковский

валидатор - это разводка для лохов
разумным людям он никогда не был нужен, не нужен сейчас и не нужен будет в будущем

@Ципихович Эндрю · 19.10.2012, 19:11 **[ТС]**

Сообщение от kalabuni

так и написано: в первый раз ничего не делать, со второго раза - открывать/закрывать

Сообщение от Ципихович Эндрю

Пошла магия

- хреновая, да?!
Спасибо

@_DmS_ · 19.10.2012, 19:36

При первом клике свойство display становится равным "none" (по показаниям FireBug и Dragonfly оно изначально равно ""). Ну а дальше скрипт работает как надо. Так как изначально div скрыт то код можно сделать таким:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function spoiler(id)
{
        var obj = "";   
        // Проверить совместимость браузера
        if(document.getElementById)
            obj = document.getElementById(id).style;
        else if(document.all)
            obj = document.all[id];
        else if(document.layers)
            obj = document.layers[id];
        else
            return 1;
        // Пошла магия
        if(obj.display == "")
            obj.display = "none";
        if(obj.display != "none")
            obj.display = "none";
        else
            obj.display = "block";
}

@Ципихович Эндрю · 19.10.2012, 19:37 **[ТС]**

Сообщение от kalabuni

из прошлого века

не буду пользоваться

@_DmS_ · 19.10.2012, 19:52

Да. Он просто убрал проверку браузеров т.к. getElementById итак все поддерживают и заменил условия if...else на условный оператор x ? a : b. А по сути одно и тоже...

@kalabuni · 19.10.2012, 20:02

_DmS_, а вот и нет

не угадали, потому что сути не знаете/не поняли

спросить у браузера (прочитать) значение какого-то свойства стиля можно только в двух случаях:
1) если это свойство напрямую написано в самом теге, вот так:<div id="content" style="display: none">

2) если это свойство уже было ранее прописано скриптом, вот так: document.getElementById ('content').style.display = 'none';

а если правило установлено в стилевом блоке (или в css-файле), то чтение этого свойства даст пустоту
что и правильно - ничего ведь в теге не написано, значит пустота

поэтому в первый раз спрашивать if (display == 'none') - это глупо и неверно
браузер вернёт пустоту, которая не равна 'none', т.е. ответ отрицательный
и в результате div ещё раз станет невидимым (а он и так невидим)
и опять всё будет работать только со второго раза

спрашивать надо именно так, как и сделал я - if (display == 'block')
ответ на этот вопрос будет отрицательным, и уже с первого раза всё будет работать
-----

так что не надо умалять моих несомненных заслуг

-----
разумеется, у браузера можно спросить и про 'none'
но спрашивать тогда надо будет не через объект style,
а через объект currentStyle (в браузере MSIE) или через объект getComputedStyle (для Mozilla)
но смысла нет - код тогда станет много объёмнее
смотрите сами:

JavaScript
1
2
3
4
5
6
7
function spoiler (objID)
{
var obj = document.getElementById (objID)
if (navigator.userAgent.indexOf ('MSIE') > 0) var dys = obj.currentStyle.display;
else var dys = document.defaultView.getComputedStyle (obj, null).getPropertyValue ('display');
obj.style.display = (dys == 'none') ? 'block' : 'none';
}

@Ципихович Эндрю · 19.10.2012, 20:04 **[ТС]**

Спасибо
Понял, не подскажите как регулируется раскрывание спойлера в разные стороны относительно строки запускающей спойлер, вверх, вправо, вверх и вправо и т. д.

@kalabuni · 19.10.2012, 20:12

весьма странный вопрос...

в фильме ДМБ была хохма: «Ты суслика видишь? — Нет. — И я нет. А он есть!» (с)
помните?

теги со стилем display: none - они как тот суслик
их никто не видит, но они в том месте в коде прописаны
и именно в этом месте, где они прописаны, они и покажутся, если значение стиля display изменить на 'block', 'inline' (что-то ещё допустимое)

от месторасположения строки со ссылкой, которая изменяет это свойство стиля, ни место "раскрывания" спойлера, ни направление этого "раскрывания" никак не зависят
такую ссылку вы можете прописать вообще в дочернем окне - в одном окне кликнете, в другом - откроется

@Ципихович Эндрю · 19.10.2012, 20:41 **[ТС]**

понял, а как быть спойлер внизу страницы, при открытии у него изображение и нужно, чтобы страница поднялась вверх для его просмотра?

@kalabuni · 19.10.2012, 20:56

по-разному можно
например, так:

JavaScript
1
2
3
4
5
6
function spoiler (objID)
{
var obj = document.getElementById (objID);
if (obj.style.display == 'block') obj.style.display = 'none';
else obj.style.display = 'block', obj.scrollIntoView (1);
}

@Ципихович Эндрю · 19.10.2012, 21:11 **[ТС]**

так вообще засухарился

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
55
56
<!DOCTYPE html>
<!--html5-->
 
<html>
 
<head>
 
<meta http-equiv="content-type" content="text/html; charset=utf-8">
 
<!--
Сервис для проверки валидности сайта:
http://validator.w3.org/#validate_by_input
http://validator.w3.org/#validate_by_uri
-->
<title>Спойлер с JavaScript</title>
 
<!--функция спойлера-->
<script type="text/javascript">
 
//вариант со скролингом страницы при раскрытии spoiler'а
var obj = document.getElementById (objID);
if (obj.style.display == 'block') obj.style.display = 'none';
else obj.style.display = 'block', obj.scrollIntoView (1);
 
//вариант без скролинга страницы при раскрытии spoiler'а
//{with (document.getElementById (objID).style) display = (display == 'block') ? 'none' : 'block'}
 
</script>
<!--конец функция спойлера-->
 
<!--css спойлера spoiler'а-->
<style type="text/css">
#spoiler_content {
    display: none;
    }
</style>
<!--конец css спойлера spoiler'а-->
 
</head>
 
<body>
 
<p></p>
 
<div id="spoiler_content">
<!--Содержимое спойлера может быть любым: текст, картинки, флеш анимация, ссылки-->
<!--img одинарный тег src - источник alt - описание изображения width=100% - выносить в css-->
<img src="Web%20browser.jpg" alt="Изображение браузеров на панели задач" title="Изображение браузеров на панели задач">
</div>
<!--spoiler раскроется выше или ниже строки запускающей его
в зависимости от места нахождения блока div id="spoiler_content"-->
<a href="javascript: spoiler_content ('spoiler_content')">Спойлер...</a>
 
</body>
  
</html>

@kalabuni · 19.10.2012, 21:31

Сообщение от Ципихович Эндрю

так вообще засухарился

ваш мозг?
согласен, очень даже похоже... сухарь у вас в голове почти каменный

где определение функции - function spoiler (objID), где фигурные скобки, блок функции выделяющие???

с какого этажа вас уронила мама в детстве? (если что - я вас не оскорбляю, я известный фильм "Праздник святого Йоргена" цитирую)

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
<html>
<head>
<style>
html, body {height: 100%}
#content {
    display:none;
    background: #888444;
    height: 500px; /* изменил высоту, чтобы нагляднее было*/
}
</style>
<script>
function spoiler (objID)
{
var obj = document.getElementById (objID);
if (obj.style.display == 'block') obj.style.display = 'none';
else obj.style.display = 'block', obj.scrollIntoView (1);
}
</script>
</head>
<body>
<a href="javascript: spoiler ('content')">Спойлер... можно здесь</a>
<div style="height: 85%; background-color: silver">содержимое страницы до спойлера</div>
<a href="javascript: spoiler ('content')">Спойлер...а можно и здесь</a>
<div id="content">Содержимое спойлера может быть любым: текст, картинки, флеш анимация, ссылки</div>
<!-- а вот здесь только очень засушенные мозги могут прописать ссылку, чтобы проверить, как скролл работает -->
</body>
</html>

18.02.2013, 14:01

Сообщение от kalabuni

JavaScript
1
{with (document.getElementById (objID).style) display = (display == 'block') ? 'none' : 'block'}

Будьте добры, как реализовать функцию смены состояния - В закрытом состоянии спойлера текст - "Открыть"; в открытом "Закрыть"?

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@Taatshi Почетный модератор 12274 / 5340 / 268 Регистрация: 05.04.2011 Сообщений: 14,086 Записей в блоге: 2
	19.10.2012, 17:13
	Ципихович Эндрю, одна тема - один вопрос. 0

@_DmS_ 25 / 25 / 1 Регистрация: 01.09.2012 Сообщений: 79
	19.10.2012, 19:52
	Да. Он просто убрал проверку браузеров т.к. getElementById итак все поддерживают и заменил условия if...else на условный оператор x ? a : b. А по сути одно и тоже... 1

@Ципихович Эндрю 1709 / 578 / 74 Регистрация: 10.04.2009 Сообщений: 9,294
	19.10.2012, 20:04 [ТС]
	Спасибо Понял, не подскажите как регулируется раскрывание спойлера в разные стороны относительно строки запускающей спойлер, вверх, вправо, вверх и вправо и т. д. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	19.10.2012, 20:12
	весьма странный вопрос... в фильме ДМБ была хохма: «Ты суслика видишь? — Нет. — И я нет. А он есть!» (с) помните? теги со стилем display: none - они как тот суслик их никто не видит, но они в том месте в коде прописаны и именно в этом месте, где они прописаны, они и покажутся, если значение стиля display изменить на 'block', 'inline' (что-то ещё допустимое) от месторасположения строки со ссылкой, которая изменяет это свойство стиля, ни место "раскрывания" спойлера, ни направление этого "раскрывания" никак не зависят такую ссылку вы можете прописать вообще в дочернем окне - в одном окне кликнете, в другом - откроется 1

@Ципихович Эндрю 1709 / 578 / 74 Регистрация: 10.04.2009 Сообщений: 9,294
	19.10.2012, 20:41 [ТС]
	понял, а как быть спойлер внизу страницы, при открытии у него изображение и нужно, чтобы страница поднялась вверх для его просмотра? 0