Создать ответ 
Проблемы с скриптом "Собственный спойлер с плавным открытием и скрытием содержимого"
Автор Сообщение
AnriZaa Не на форуме
Рядовой
*

Сообщений: 2
У нас с: Jul 2016
Сообщение: #1
Проблемы с скриптом "Собственный спойлер с плавным открытием и скрытием содержимого"
Здравствуйте всем! Появилась проблема с скриптом "Собственный спойлер с плавным открытием и скрытием содержимого". Содержимое привожу ниже.

Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Спойлер №1</title>
<base href="http://usefulscript.ru/">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<style type="text/css">
.spoiler_body { display:none; font-style:italic; }
.spoiler_links { cursor:pointer; font-weight:bold; text-decoration:underline; }
.blue { color:#000099; }
.green { color:#009900; }
.spoiler_close
</style>
</head>
<body>
<div class="spoiler_links blue">Спойлер №1 (кликните для открытия/закрытия)</div>
<div class="spoiler_body">
Текст под спойлером<br>
имеет класс spoiler_body.<br>
Для придания стиля данному тексту<br>
просто добавьте еще один класс.
<br>
    <div class="spoiler_close">Закрыть спойлер</div>
</div>
<br>
<div class="spoiler_links green">Спойлер №2 (кликните для открытия/закрытия)</div>
<div class="spoiler_body">
А это уже текст второго спойлера!<br>
Данный спойлер также позволяет скрывать<br>
излишнее на сайте!
</div>

<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
    if ($(this).next('.spoiler_body').css("display")=="none") {
        $('.spoiler_body').hide('normal');
        $(this).next('.spoiler_body').slideToggle('normal');
    }
    else $('.spoiler_body').hide('normal');
    
       $('.spoiler_close').click(function(){              
    $(this).parent('.spoiler_body').toggle('normal');
    });
    
    return false;
});
});
</script>
</body>
</html>

Скрипт работает отлично.
Проблема состоит в следующем.
В тело спойлера добавлен контейнер закрытия спойлера
Код:
<div class="spoiler_close">Закрыть спойлер</div>
а в сам скрипт строки:
Код:
$('.spoiler_close').click(function(){
$(this).parent('.spoiler_body').toggle('normal');
});
И здесь наблюдается интересная работа скрипта. Описываю подробно.
Нажимаю "Спойлер №1 (кликните для открытия/закрытия)", спойлер открывается.
Нажимаю "Закрыть спойлер", спойлер закрывается (здорово).
Сразу же нажимаю "Спойлер №1 (кликните для открытия/закрытия)" второй раз, спойлер открывается.
Нажимаю "Закрыть спойлер", спойлер закрывается и сразу же открывается, так и остается открытым.
Нажимаю "Спойлер №1 (кликните для открытия/закрытия)" третий раз, спойлер открывается.
Нажимаю "Закрыть спойлер", спойлер закрывается и сразу же открывается 2 раза и остается открытым.
И так до 5 раз. Дальше не хватило терпения.
Что за счетчик такой интересный.

Пробовал в теги <style></style> добавить строчку .spoiler_close также не спасает.
11.07.2016 07:14:17
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,279
У нас с: Aug 2011
Сообщение: #2
RE: Проблемы с скриптом "Собственный спойлер с плавным открытием и скрытием содер...
Как и предполагал, Вы не совсем все сделали правильно, а если быть точнее, не туда добавили JavaScript код.

Правильный JavaScript код выглядит так:
Код:
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){
    if ($(this).next('.spoiler_body').css("display")=="none") {
        $('.spoiler_body').hide('normal');
        $(this).next('.spoiler_body').slideToggle('normal');
    }
    else $('.spoiler_body').hide('normal');
    return false;
});
    $('.spoiler_close').click(function(){
        $(this).parent('.spoiler_body').toggle('normal');
    });
});
</script>

А под добавлением стиля .spoiler_close я подразумевал не просто добавить название, а добавить так же и оформление, например, так:
Код:
.spoiler_close { color:#FF0000; font-weight:bold; text-decoration:underline; }
11.07.2016 20:37:58
Найти все сообщения Цитировать это сообщение
AnriZaa Не на форуме
Рядовой
*

Сообщений: 2
У нас с: Jul 2016
Сообщение: #3
RE: Проблемы с скриптом "Собственный спойлер с плавным открытием и скрытием содержимого"
Все отлично! Заработало. Прекрасно. Я в восторге. Но это еще не все. Ваш скрипт задумывался к использованию в более широком смысле. Сейчас объясню. На странице по Ваш скрипт создаю N спойлеров. Под каждым свой текст. Под текстом строка закрытия спойлера и своя ссылка на ... А вот здесь мне нужно выводить 5-10 изображений с ручным перелистыванием либо в новом окне (банально), либо в модальном с затемнением фона (что красиво), либо в галерее. Короче нужно, чтобы при нажатии ссылки можно вывести и листать несколько изображений, потом закрыть их и вернуться в спойлер. Плагины ставить не хочу, да и не силен пока в них. Что-нибудь попроще и красиво. Думаю понятно объяснил. Как можно осуществить такую мечту. Заранее благодарю.

Да еще уточню. Изображения различного размера будут.
(Последний раз сообщение было отредактировано 11.07.2016 в 22:19:02, отредактировал пользователь AnriZaa.)
11.07.2016 22:17:29
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


Пользователи просматривают эту тему: 1 Гость(ей)



Mail.ru LiveInternet

© Copyright 2011-2016 by UsefulScript.ru