Каскадный режим | Линейный режим

Sergey1917 · 03.05.2013 15:41:13

У меня при padding: 1px; поставил top: -11px; и все выровнялось.

Спасибо еще раз, что помогли разобраться. Сам бы эту проблему не решил. Скорей, остался бы без открыть/закрыть.

А как теперь, какой код правильней оставить?
<div class="title"><h3 class="title_h3">Заголовок спойлера №1</h3><p class="open_close">Закрыть</p></div>
или
<div class="title"><p class="open_close">Закрыть</p><h3 class="title_h3">Заголовок спойлера №2</h3></div>

И так и так работает.

***Admin*** · 03.05.2013 15:44:09

Первый вариант будет более правильный и удобнее для разборки кода.

Sergey1917 · 06.05.2013 00:56:27

На сайте первоисточнике скрипт изменили - pcvector.net/index.php?newsid=284
Можете посмотреть код для интереса. Но видно автор торопился, проскочила ошибка. При изменении статуса спойлера по умолчанию, с закрытого на открытый меняются местами цвет и надпись. Вместо закрыть - теперь открыть.

Так что ваш вариант, Верховный Главнокомандующий, лучший на сегодня из всех сушествующих. Не зря мучились.

Zalex · 17.05.2013 08:26:26

Помогите пожалуйста с кодом, у меня при открытии спойлера он открывается и закрывается раз по 7, спойлеров на одной странице много вот код:

Код:

<style type="text/css">

 .spoiler_body {display:none; cursor:pointer;}

</style>

<script type="text/javascript">

$(document).ready(function(){

 $('.spoiler_links').click(function(){

 $(this).parent().children('div.spoiler_body').toggle('normal');

 return false;

 });

});

</script>

<div>

 <a href="" class="spoiler_links"><h2>$TITLE$</h2></a>

 <div class="spoiler_body"> 

<script src="http://rapforce.ucoz.ru/media/?auto=0;small=0;color=000000;loop=0;textoff=0;t=audio;f=$RFILE_URL$" type="text/javascript"></script>

<a href="$RFILE_DIRECT_URL$" ><img src="/123.gif" ></a>

</div>

</div>

<br>

P.S сайтец на ucoz.

***Admin*** · 17.05.2013 19:19:54

Ваша ошибка заключается в том, что на одной страничке должен быть только один блок CSS и JavaScript кода:

Код:

<style type="text/css">

 .spoiler_body {display:none; cursor:pointer;}

 </style>

 <script type="text/javascript">

 $(document).ready(function(){

 $('.spoiler_links').click(function(){

 $(this).parent().children('div.spoiler_body').toggle('normal');

 return false;

 });

 });

 </script>

А у Вас для каждого спойлера данный код повторяется, в результате чего работает не один, а сражу десять скриптов, которые по очереди и открывают/закрывают спойлер. Удалите все повторяющиеся CSS и JavaScript коды!

Для того чтобы у Вас на одной страничке было несколько спойлеров, делайте так:

Код:

<style type="text/css">

 .spoiler_body {display:none; cursor:pointer;}

 </style>

 <script type="text/javascript">

 $(document).ready(function(){

 $('.spoiler_links').click(function(){

 $(this).parent().children('div.spoiler_body').toggle('normal');

 return false;

 });

 });

 </script>

<div>

 <a href="" class="spoiler_links"><h2>$TITLE$</h2></a>

 <div class="spoiler_body"> 

 <script src="http://rapforce.ucoz.ru/media/?auto=0;small=0;color=000000;loop=0;textoff=0;t=audio;f=$RFILE_URL$" type="text/javascript"></script>

 <a href="$RFILE_DIRECT_URL$" ><img src="/123.gif" ></a>

 </div>

 </div>

 <br>

<div>

 <a href="" class="spoiler_links"><h2>$TITLE$</h2></a>

 <div class="spoiler_body"> 

 <script src="http://rapforce.ucoz.ru/media/?auto=0;small=0;color=000000;loop=0;textoff=0;t=audio;f=$RFILE_URL$" type="text/javascript"></script>

 <a href="$RFILE_DIRECT_URL$" ><img src="/123.gif" ></a>

 </div>

 </div>

 <br>

<div>

 <a href="" class="spoiler_links"><h2>$TITLE$</h2></a>

 <div class="spoiler_body"> 

 <script src="http://rapforce.ucoz.ru/media/?auto=0;small=0;color=000000;loop=0;textoff=0;t=audio;f=$RFILE_URL$" type="text/javascript"></script>

 <a href="$RFILE_DIRECT_URL$" ><img src="/123.gif" ></a>

 </div>

 </div>

 <br>

То есть, как писал Выше, блок с CSS и JavaScript кодами только один, а вот блоков DIV - сколько душа пожелает. Удачи!

Lethalcarry · 03.02.2014 11:59:18

Код:

<html>

<head>

<title>Untitled Document</title>

<style type="text/css">

 .spoiler_body {display:none;}

 .spoiler_links {cursor:pointer;}

</style>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

</head>

<body>

<div>

 <a href="" class="spoiler_links">Спойлер №1 (кликните для показа/скрытия)</a>

 <div class="spoiler_body">

  Текст по спойлером<br>

  плавно появляется<br>

  и плавно исчезает<br>

  при клике по спойлеру

 </div>

</div>

<div>

 <a href="" class="spoiler_links">Спойлер №2 (кликните для показа/скрытия)</a>

 <div class="spoiler_body">

  А это уже другой спойлер!<br>

  И он тоже работает!

 </div>

</div>

<script type="text/javascript"> 

$(document).ready(function(){

 $('.spoiler_links').click(function(){

  $(this).parent().children('div.spoiler_body').toggle('normal');

  return false;

 });

});

</script>

</body>

</html>

Что я сделал не так?

***Admin*** · 03.02.2014 18:40:00

Вы все сделали правильно! Приведенный Вами код у меня работает и в Опере и в IE и в Хроме. А что у Вас не так?

Возможно, у Вас что-то где-то закешировалось... либо не подгрузилась библиотека jQuery. Попробуйте закрыть и открыть заново браузер.

masterpiece · 14.02.2015 04:58:44

Доброе время суток! Очень нужна ваша помощь в решении задачи со спойлером.
А как сделать, что бы вместо надписей Закрыть/Открыть были картинки и что бы когда кликаешь по пустой области или по самой области скрывающегося текста спойлер закрывался и становилась первая картинка (Открыть).
Заранее огромное спасибо за ответ!!!

Код:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>1

    </title>

    <script type="text/javascript" src="jquery-1.11.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

 $('.spoiler_links').click(function(){

 $("div[class^='spoiler_body']").hide('normal');

  if ($(this).parent().children('div.spoiler_body').css("display")=="none") {

$("div[class^='spoiler_body']").hide('normal');

$(".spoiler_links").text('Открыть');

$(this).parent().children('div.spoiler_body').toggle('normal');

}

else $("div[class^='spoiler_body']").hide('normal');

if ($(this).text()=='Закрыть') $(this).text('Открыть');

else $(this).text('Закрыть');

  return false;

 });

 $(document).click(function(){

$("div[class^='spoiler_body']").hide('normal');

});

});

</script>

</head>

<body>

<style type="text/css">

 .spoiler_body {display:none;}

 .spoiler_links {cursor:pointer;}

</style>

<div>

 <a href="" class="spoiler_links">Открыть</a>

 <div class="spoiler_body">

  Текст под спойлером<br>

  плавно появляется<br>

  и плавно исчезает<br>

  при клике по спойлеру

 </div>

</div>

<div>

 <a href="" class="spoiler_links">Открыть</a>

 <div class="spoiler_body">

  А это уже другой спойлер!<br>

  И он тоже работает!

 </div>

</div>

</body>

</html>

***Admin*** · 14.02.2015 13:28:52

Попробуйте использовать данный код:

Код:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

 $('.spoiler_links').click(function(){

  if ($(this).parent().children('div.spoiler_body').css("display")=="none") {

   $("div[class^='spoiler_body']").hide('normal');

   $("img[class^='spoiler_links']").attr('src', 'img_1.png');

   $(this).attr('src', 'img_2.png').parent().children('div.spoiler_body').toggle('normal');

  }

  else {

   $("div[class^='spoiler_body']").hide('normal');

   $(this).attr('src', 'img_1.png');

  }

  return false;

 });

});

$(document).click(function(){

   $("div[class^='spoiler_body']").hide('normal');

   $("img[class^='spoiler_links']").attr('src', 'img_1.png');

});

</script>

</head>

<body>

<style type="text/css">

.spoiler_body {display:none;}

.spoiler_links {cursor:pointer;}

</style>

<div>

 <img src="img_1.png" class="spoiler_links">

 <div class="spoiler_body">

  Текст под спойлером<br>

  плавно появляется<br>

  и плавно исчезает<br>

  при клике по спойлеру

 </div>

</div>

<div>

 <img src="img_1.png" class="spoiler_links">

 <div class="spoiler_body">

  А это уже другой спойлер!<br>

  И он тоже работает!

 </div>

</div>

</body>

</html>

masterpiece · 14.02.2015 16:17:27

СПАСИБО ОГРОМНОЕ ПРИ ОГРОМНОЕ!!!!!! Rose

Вы, меня очень и очень выручили!!!

Каскадный режим \| Линейный режим Еще один пример спойлера с плавным открытием и закрытием на jquery
Автор	Сообщение