Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.86/7: Рейтинг темы: голосов - 7, средняя оценка - 4.86
0 / 0 / 0
Регистрация: 09.01.2015
Сообщений: 39

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

17.07.2015, 20:22. Показов 1585. Ответов 9
Метки нет (Все метки)

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

Кликните здесь для просмотра всего текста
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>



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

очень долго ковырялся, но все тщетно.
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
17.07.2015, 20:22
Ответы с готовыми решениями:

Как убрать подчеркивание при наведении мышки
в исходном коде написано следующее &lt;a href=&quot;index.php?option=com_content&amp;amp;view=article&amp;amp;id=77&amp;amp;catid=12&amp;amp;Itemid=101&quot;...

Как убрать подчеркивание заголовка h3 при наведении?
Всем доброго времени суток. Есть вот такой код: &lt;div id=&quot;footer_top&quot;&gt; &lt;div class=&quot;footer_block&quot;&gt; ...

Как убрать эффект при наведении на изображение записи
Здравствуйте. При наведении курсора на изображение записи срабатывает эффект, при котором поверх изображения накладывается (постепенно,...

9
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
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-ов стили. Так только мой прадед делал, когда сайты Деникина взламывал.
1
0 / 0 / 0
Регистрация: 09.01.2015
Сообщений: 39
17.07.2015, 22:19  [ТС]
А как это залепить в код?)
P.S. это все нужно вставить в секцию одностраничника, созданного через убогую платформу. Посему желательно, что бы код был независимым.
моих познаний не хватает.
0
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
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>
1
0 / 0 / 0
Регистрация: 09.01.2015
Сообщений: 39
18.07.2015, 00:39  [ТС]
Благодарю. Последний вопрос: если все таки понадобится подчеркивание, можно ли регулировать его расстояние до текста?
0
 Аватар для Lazy_Den
3325 / 2845 / 1423
Регистрация: 15.01.2014
Сообщений: 6,170
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;
}
1
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
0 / 0 / 0
Регистрация: 09.01.2015
Сообщений: 39
19.07.2015, 15:17  [ТС]
Попробовал - проблема с переносами решилась, но теперь текст выровнялся по левому краю)
0
0 / 0 / 0
Регистрация: 09.01.2015
Сообщений: 39
14.08.2015, 23:00  [ТС]
Разобрался)
Не подскажите, что добавить в код, что бы спойлер открывался поверх всех элементов, находящихся ниже его, а НЕ отодвигал их?
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
14.08.2015, 23:00
Помогаю со студенческими работами здесь

Не работает код смены цвета кнопки при наведении курсора мыши
Уважаемый пользователи портала, Есть docm word 2010 c несколькими кнопками в нём(button,button2 итд). Как при наведении на конкретную...

Добавить эффект загругления при наведении на ссылку
Приветствую всех. Туплю и не могу понять , как при наводке на пункты , сделать этот закругленный прямоугольник ?)

Эффект при наведении. При наведении на впереди стоящий элемент, предыдущие элементы меняли цвет border
Необходимо реализовать это по возможности без js. Если есть какие-то варианты на css, буду рад изучить вопрос! Благодарю! На рисунке...

Добавить эффект "подпрыгивающих" картинок при наведении на блок
Хочу чтобы при наведении на блок с картинками - картинки два раза пригнули к верху на 3px а потом стали на место за 500 мл.с. .box...

Подчеркивание при наведении
https://jsfiddle.net/on6gtsnf/1/ Ребят, ткните в ошибку, почему у меня не работает подчеркивание? &lt;ul&gt; &lt;li...


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

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
Доступность команды формы по условию
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. Реализовать контроль заполнения реквизита. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru