Создать ответ 
Еще один пример спойлера с плавным открытием и закрытием на jquery
Автор Сообщение
Sergey1917 Не на форуме
Старшина
*

Сообщений: 51
У нас с: Apr 2013
Сообщение: #21
RE: Еще один пример спойлера с плавным открытием и закрытием на jquery
jQuery я использую старую версию, входящую в ядро Друпала. А jQuery.noConflict(); используется для согласования со старой. А мне не с чем согласовывать. Так что этот вариант, наверное, отпадает. Хотя я и пробовал подключать версию поновее, но конфликтов не наблюдал. Остальное буду проверять. Спасибо, что помогаете.
Попробуйте в нашем коде везде заменить title и block на что-то другое.

Я снял с публикации на главной статьи, где использовал код спойлера. Эффект не исчез.
Закомментировал код по строчкам, все по очереди. Когда вторую строку комментировал, то с первой комменты снимал, и так далее. Вот результат этого опыта. Надеюсь, что это вам поможет разобраться.

<!-- $(".box .block").show(); --> спойлер работает, ссылки нет
<!-- $(".closed .block").hide(); --> спойлер работает, ссылки нет
<!-- $('.title').click(function(){ --> спойлер работает, ссылки нет
<!-- $(this).parent().toggleClass("show").children('div.block').slideToggle("medium"); --> спойлер и ссылки не работают
<!-- if ($(this).children('h2').css("background")=="#bbbbbb") $(this).children('h2').css("background","#dddddd"); --> спойлер не работает, ссылки открываются
<!-- else $(this).children('h2').css("background","#bbbbbb"); --> спойлер работает, ссылки нет
<!-- return false; --> спойлер работает, ссылки открываются

Забыл сказать. Заголовки статей идут в тегах <h1>. Они же и появляются в виде ссылок в анонсах на главной. Это они не кликаются. Все другие кликаются нормально.
(Последний раз сообщение было отредактировано 15.04.2013 в 01:41:16, отредактировал пользователь Sergey1917.)
14.04.2013 23:36:39
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #22
RE: Еще один пример спойлера с плавным открытием и закрытием на jquery
Вы сами нашли решение. Wink
Судя из того что Вы написали, могу предположить, что от данной проблемы можно избавиться путем удаления return false;.
return false; означает что необходимо прекратить выполнение скрипта (в том числе похоже и переход по ссылке прерывает).
15.04.2013 19:11:24
Найти все сообщения Цитировать это сообщение
Sergey1917 Не на форуме
Старшина
*

Сообщений: 51
У нас с: Apr 2013
Сообщение: #23
RE: Еще один пример спойлера с плавным открытием и закрытием на jquery
Да, именно эту строчку я и оставил закомментированной еще с ночи. Сомневался только из-за того, что не знал ее функции. Теперь могу смело ее удалить.

Извините, что загрузил вас своей проблемой.
(Последний раз сообщение было отредактировано 15.04.2013 в 20:33:59, отредактировал пользователь Sergey1917.)
15.04.2013 20:32:12
Найти все сообщения Цитировать это сообщение
Sergey1917 Не на форуме
Старшина
*

Сообщений: 51
У нас с: Apr 2013
Сообщение: #24
RE: Еще один пример спойлера с плавным открытием и закрытием на jquery
Уважаемый Верховный Главнокомандующий! А вопрос с цветами открытого и закрытого спойлера в данном коде неразрешим?
16.04.2013 17:55:47
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #25
RE: Еще один пример спойлера с плавным открытием и закрытием на jquery
Так мы собственно ничего в коде кардинально и не изменили за исключением удаления одной строки.

Можно конечно присвоить тегу h2 свой (например, title_h2) стиль и работать с ним.

Код:
<div class="box">
      <div class="title"><h2 class="title_h2">ЗАГОЛОВОК №1</h2></div>
      <div class="block">Содержимое спойлера №1</div>
</div>

Код:
$('.title').click(function(){
    $(this).parent().toggleClass("show").children('div.block').slideToggle("medium");
    if ($(this).children('.title_h2').css("background")=="#bbbbbb") $(this).children('.title_h2').css("background","#dddddd");
    else $(this).children('.title_h2').css("background","#bbbbbb");
    return false;
});

У меня в Опере, например все норм работает, а в IE глючит.
16.04.2013 19:05:52
Найти все сообщения Цитировать это сообщение
Sergey1917 Не на форуме
Старшина
*

Сообщений: 51
У нас с: Apr 2013
Сообщение: #26
RE: Еще один пример спойлера с плавным открытием и закрытием на jquery
Что за проклятие такое лежит на этом спойлере. После изменения кода (отмена на клик по всему, оставив только клик по блоку) спойлер перестал работать в IE7. Только сейчас заметил. Наверное что-то зацепили случайно?
(Последний раз сообщение было отредактировано 16.04.2013 в 19:10:21, отредактировал пользователь Sergey1917.)
16.04.2013 19:09:12
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #27
RE: Еще один пример спойлера с плавным открытием и закрытием на jquery
Нет. IE всегда был глючным. Спойлер открывается и закрывается в IE только при клике непосредственно по тексту заголовка.
16.04.2013 19:23:53
Найти все сообщения Цитировать это сообщение
Sergey1917 Не на форуме
Старшина
*

Сообщений: 51
У нас с: Apr 2013
Сообщение: #28
RE: Еще один пример спойлера с плавным открытием и закрытием на jquery
Сгоряча и не заметил это.
У меня в Опере, например все норм работает, а в IE глючит.

Не работает нормально и с новым стилем, и в Опере тоже. После перезагрузки страницы открытый блок более светлый, закрытый темный. После первого клика открытый темнеет и замораживается, а закрытый цвет вообще не меняет. Проверил еще в Хроме и в IE7. Тоже нормально не показывается. Видно от этой идеи придется отказаться.
(Последний раз сообщение было отредактировано 16.04.2013 в 19:56:38, отредактировал пользователь Sergey1917.)
16.04.2013 19:29:49
Найти все сообщения Цитировать это сообщение
Sergey1917 Не на форуме
Старшина
*

Сообщений: 51
У нас с: Apr 2013
Сообщение: #29
RE: Еще один пример спойлера с плавным открытием и закрытием на jquery
HTML:
<div class="box closed">
<div class="hide2">
<h2>Заголовок спойлера</h2>
</div>
<div class="block">
<div class="block_in">
<p>Скрытый под спойлером текст.</p>
<p>Для работы требуется jQuery.</p>
</div>
</div>
</div>

jQuery:
<script>
$(document).ready(function()
$(".box .block").show();
$(".closed .block").hide();
$("div.hide2").click(function()
$(this).toggleClass("show2").next().slideToggle("medium");
);
);
</script>

Код от автора. Надеюсь пригодится.

Его демо (pcvector.net/index.php?newsid=284) на IE7 работает нормально, а вставляю этот же (из демо) код у себя - работает только по клику на заголовке.
P.S. Поставил изначальный (не урезанный) файл style.css и в IE7 клик по всему блоку заработал.
(Последний раз сообщение было отредактировано 17.04.2013 в 17:43:29, отредактировал пользователь Sergey1917.)
16.04.2013 23:39:43
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #30
RE: Еще один пример спойлера с плавным открытием и закрытием на jquery
Ну ничего нового там не изобрели.

Зато я сегодня посидел вечерком и вот что сделал - Универсальный спойлер для сайта

Пришлось много чего изменить, но по-моему получилось именно то, что Вам нужно. Happy
17.04.2013 22:23:11
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


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


LiveInternet
© Copyright 2011-2024 by UsefulScript.ru