Настройка спойлера: добавить эффект смены цвета при наведении, формат раскрытия и убрать подчеркивание.

@Anshag · Регистрация: 09.01.2015

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

Не знаю куда обратиться
есть код, который мне нужно отредактировать.

Кликните здесь для просмотра всего текста

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 xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-5" />
 <title>Спойлеры</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('.spoiler_links').click(function(){
 $(this).parent().children('div.spoiler_body').toggle('slow');
 return false;
 });
});
</script>
<style type="text/css">
 .spoiler_body {display:none;}
 .spoiler_links {cursor:pointer;}
</style>
  </head>
 <body>
<div>
<a href="" class="spoiler_links"><span style="font-size:36pt"><span style="color:black"><center>Название спойлера</center></span></span></a>
 <div class="spoiler_body">
 <img src="http://www.blogcdn.com/massively.joystiq.com/media/2011/10/facepalm.jpg" alt="" />
 </div>
</div>
 </body>
</html>

Нужно добавить эффект смены цвета при наведении на название спойлера и убрать подчеркивание.
Так же нужно поменять формат раскрытия спойлера Сейчас он раскрывается с левого верхнего угла, а нужно, что бы он открывался сверху вниз.

очень долго ковырялся, но все тщетно.

@Lazy_Den · 17.07.2015, 20:36

Anshag, за исключение, как вы сказали, "формата раскрытия", всё реализуется в CSS:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
.spoiler_body {
    display:none;
}
.spoiler_links {
    font-size: 36pt;
    text-decoration: none;
    color: #000;
    cursor:pointer;
}
.spoiler_links:hover {
    color: #060;
}

Ну, а в JS изменить метод toggle() на slideToggle(). И не забудьте убрать из span-ов стили. Так только мой прадед делал, когда сайты Деникина взламывал.

@Anshag · 17.07.2015, 22:19 **[ТС]**

А как это залепить в код?)
P.S. это все нужно вставить в секцию одностраничника, созданного через убогую платформу. Посему желательно, что бы код был независимым.
моих познаний не хватает.

@Lazy_Den · 17.07.2015, 23:16

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

А как это залепить в код?)

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
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Спойлеры</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('.spoiler_links').click(function(){
        $(this).parent().children('div.spoiler_body').slideToggle('slow');
        return false;
    });
});
</script>
<style type="text/css">
.spoiler_body {
    display:none;
}
.spoiler_links {
    font-size: 36pt;
    text-align: center;
    text-decoration: none;
    color: #000;
    cursor:pointer;
}
.spoiler_links:hover {
    color: #060;
}
</style>
</head>
<body>
    <div>
        <a href="" class="spoiler_links">
            <span>
                <span>Название спойлера</span>
            </span>
        </a>
        <div class="spoiler_body">
            <img src="http://www.blogcdn.com/massively.joystiq.com/media/2011/10/facepalm.jpg" alt="" />
        </div>
    </div>
</body>
</html>

@Anshag · 18.07.2015, 00:39 **[ТС]**

Благодарю. Последний вопрос: если все таки понадобится подчеркивание, можно ли регулировать его расстояние до текста?

@Lazy_Den · 18.07.2015, 01:09

Anshag, только за счет дополнительного элемента. Например, так:

HTML5
1
<a href=""><span></span>Some text</a>

CSS
1
2
3
4
5
6
7
8
9
a {
    text-decoration: none;
}
a span {
    display: inline-block;
    width: 50px;
    vertical-align: text-bottom;
    border-bottom: 1px solid #060;
}

@Anshag · 18.07.2015, 02:39 **[ТС]**

Из за значения inline-block переносы в словах появились. Как это можно исправить?

@Lazy_Den · 19.07.2015, 01:59

Anshag, попробуйте добавить родительскому элементу white-space: nowrap;

@Anshag · 19.07.2015, 15:17 **[ТС]**

Попробовал - проблема с переносами решилась, но теперь текст выровнялся по левому краю)

@Anshag · 14.08.2015, 23:00 **[ТС]**

Разобрался)
Не подскажите, что добавить в код, что бы спойлер открывался поверх всех элементов, находящихся ниже его, а НЕ отодвигал их?

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .

@Anshag 0 / 0 / 0 Регистрация: 09.01.2015 Сообщений: 39
	17.07.2015, 22:19 [ТС]
	А как это залепить в код?) P.S. это все нужно вставить в секцию одностраничника, созданного через убогую платформу. Посему желательно, что бы код был независимым. моих познаний не хватает. 0

@Anshag 0 / 0 / 0 Регистрация: 09.01.2015 Сообщений: 39
	18.07.2015, 00:39 [ТС]
	Благодарю. Последний вопрос: если все таки понадобится подчеркивание, можно ли регулировать его расстояние до текста? 0

@Anshag 0 / 0 / 0 Регистрация: 09.01.2015 Сообщений: 39
	18.07.2015, 02:39 [ТС]
	Из за значения inline-block переносы в словах появились. Как это можно исправить? 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	19.07.2015, 01:59
	Anshag, попробуйте добавить родительскому элементу white-space: nowrap; 1

@Anshag 0 / 0 / 0 Регистрация: 09.01.2015 Сообщений: 39
	19.07.2015, 15:17 [ТС]
	Попробовал - проблема с переносами решилась, но теперь текст выровнялся по левому краю) 0

@Anshag 0 / 0 / 0 Регистрация: 09.01.2015 Сообщений: 39
	14.08.2015, 23:00 [ТС]
	Разобрался) Не подскажите, что добавить в код, что бы спойлер открывался поверх всех элементов, находящихся ниже его, а НЕ отодвигал их? 0