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

@Ципихович Эндрю · Регистрация: 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'}

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

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11680&d=1772460536 Одним из. . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .
SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 19.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .

@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

@Ципихович Эндрю 1712 / 579 / 76 Регистрация: 10.04.2009 Сообщений: 9,327
	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

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