Создать ответ 
Несколько спойлеров в одну строку с показом содержимого на всю ширину
Автор Сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #51
RE: Несколько спойлеров в одну строку с показом содержимого на всю ширину
Теги html и body на страничке присутствуют? Если нет - то добавьте.

Прикрепил файл, на котором тестировал скрипт:

.zip  test.zip (Размер: 874 байт / Загрузок: 0)

P.S. Вы в одном месте не поменяли j(this) на $(this).
21.03.2016 20:24:04
Найти все сообщения Цитировать это сообщение
4uvak Не на форуме
Рядовой
*

Сообщений: 2
У нас с: Jun 2016
Сообщение: #52
RE: Несколько спойлеров в одну строку с показом содержимого на всю ширину
Почему спойлеры к и е внутри спойлера1 не открываются?
Код:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_links').click(function(){

  $(this).parent().children('.spoiler_text').html( $(this).next().html() ).toggle('normal');
  return false;
});
});
</script>


<style type="text/css">
.spoiler_body, .spoiler_text {display:none;}
.spoiler_links {cursor:pointer;}
</style>

<div>
  
  <a href="" class="spoiler_links">Спойлер №1 </a>
<div class="spoiler_body">
  Текст под спойлером<br>

  <a href="" class="spoiler_links">Спойлер к </a>
  <div class="spoiler_body">
  Текст под спойлером<br>
  
   <a href="" class="spoiler_links">Спойлер е </a>
  <div class="spoiler_body">
  Текст под спойлером<br>
  </div>
</div>
  
</div>

<a href="" class="spoiler_links">Спойлер №2 </a>
<div class="spoiler_body">
  А это уже другой спойлер!<br>
  
</div>

<a href="" class="spoiler_links">Спойлер №3 </a>
<div class="spoiler_body">
  Ну и третий спойлер<br>

</div>

<div class="spoiler_text"></div>
</div>
15.06.2016 06:27:31
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #53
RE: Несколько спойлеров в одну строку с показом содержимого на всю ширину
Данный скрипт работать не будет т.к. на экран выводится скопированный html текст содержимого спойлера, а не сам объект. Из-за этого клики по спойлерам к и е не срабатывают.
Если попытаться клонировать содержимое вложенных спойлеров при помощи .clone(), то клики мышкой уже будут срабатывать, но скопируются так же и стили (невидимые объекты) и опять скрипт работать не будет, т.к. на экране ничего не выведется.
15.06.2016 22:48:06
Найти все сообщения Цитировать это сообщение
4uvak Не на форуме
Рядовой
*

Сообщений: 2
У нас с: Jun 2016
Сообщение: #54
RE: Несколько спойлеров в одну строку с показом содержимого на всю ширину
Ну вот другой, тут открываются, но хотелось чтобы были в строку.
Код:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
    </script>
    <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>
    </head>
    <body>
    <div>
     <div>
    <a href="" class="spoiler_links" > спойлер 1 <br> </a>
    <div class="spoiler_body"> Начало документа...<br>
       <a href="" class="spoiler_links">спойлер а <br> </a> Начало документа...<br>
        <div class="spoiler_body">
       <a href="" class="spoiler_links"> спойлер б <br> </a>
     Начало документа...<br>
    </div>
    </div>
    </div>
    <div>
    <a href="" class="spoiler_links " > спойлер 2  </a>
    <div class="spoiler_body"> <p>Начало документа...</p>
       <a href="" class="spoiler_links"> спойлер а  </a> <p>Начало документа...</p>
        <div class="spoiler_body">
       <a href="" class="spoiler_links"> спойлер  б </a>
     <p>Начало документа...</p>
    </div>
    <div class="spoiler_body"></div>
     </div>
16.06.2016 10:47:30
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #55
RE: Несколько спойлеров в одну строку с показом содержимого на всю ширину
В одну строку можно сделать при помощи CSS или таблицы, но вот только содержимое спойлеров будет отображаться под заголовками спойлеров, а это Вас наверно не устроит.

Предлагаю Вам поэксперементировать лучше вот с таким скриптом спойлера, сделанным на основе скрипта спойлера с отдельным размещением заголовка и содержимого:
Код:
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<span class="sp_links" id="sp_1">Заголовок спойлера №1</span>
<span class="sp_links" id="sp_22">Заголовок спойлера №2</span>
<span class="sp_links" id="sp_333">Заголовок спойлера №3</span>

<div class="sp_body" id="body_1">
Текст первого спойлера.<br>
<span class="sp_links" id="sp_2">Заголовок спойлера №1a</span>
</div>
<div class="sp_body" id="body_22">
Текст второго спойлера.
</div>
<div class="sp_body" id="body_333">
Текст третьего спойлера.
</div>
<div class="sp_body" id="body_2">
Текст спойлера 1a.<br>
<span class="sp_links" id="sp_3">Заголовок спойлера №1aa</span>
</div>
<div class="sp_body" id="body_3">
Текст спойлера 1aa.
</div>

<style type="text/css">
.sp_body { display:none; font-style:italic; }
.sp_links { cursor:pointer; font-weight:bold; text-decoration:underline; color:#0000FF; }
</style>

<script type="text/javascript">
$(document).ready(function(){
$('.sp_links').click(function(){
  id='#body'+$(this).attr("id").substr(2);
  if ($(id).css("display")=="none") {
    $('.sp_body').slideUp('normal');
    $(id).slideToggle('normal');
  }
  else $('.sp_body').slideUp('normal');
  return false;
});
});
</script>
16.06.2016 22:50:59
Найти все сообщения Цитировать это сообщение
pleymo Не на форуме
Рядовой
*

Сообщений: 5
У нас с: Nov 2016
Сообщение: #56
RE: Несколько спойлеров в одну строку с показом содержимого на всю ширину
Автору большое спасибо за такую поддержку и помощь по вопросам использования данного скрипта, периодический пользуюсь этим спойлером около 3х лет, он не громоздкий и выполняет все необходимые функции.

Хотел бы спросить, в первых комментариях ты говорил о плавном закрытии спойлера, можешь ли помочь с этим?

У меня получился такой код:

Код:
$(document).ready(function(){
$('.spoiler_links').click(function(){

$('.spoiler_links, .spoiler_text').parent().click(function(){
$(this).children('.spoiler_exit').hide('normal');
});

$(this).parent().children('.spoiler_text').toggle(false);
$(this).parent().children('.spoiler_text').html( $(this).next().html() ).toggle('normal');
return false;

});
});

класс .spoiler_exit у меня представляет собой кнопку для выхода. Т.е. только при нажатии на нее спойлер может закрыться.

Как можно добавить плавное закрытие и возможность закрыть спойлер при нажатии на туже кнопку/текст, с помощью которой спойлер открывался?

Спасибо!
16.11.2016 20:50:53
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #57
RE: Несколько спойлеров в одну строку с показом содержимого на всю ширину
Что-то мудреный код какой-то.
Почему
Код:
$('.spoiler_links, .spoiler_text').parent().click(function(){
$(this).children('.spoiler_exit').hide('normal');
});
находится внутри $('.spoiler_links').click(function(){ });

Попытаюсь пальцем в небо угадать. Для плавного закрытия можно использовать:
Код:
$(document).ready(function(){
$('.spoiler_links').click(function(){
  $('.spoiler_links, .spoiler_text').parent().click(function(){
   $(this).children('.spoiler_exit').hide('normal');
  });
  sp=$(this).parent().children('.spoiler_text');
  txt=$(this).next().html();
  sp.hide('normal',function(){ sp.html(txt).show('normal'); });
  return false;
});
});

Для более точного результата нужно приводить код целиком, а то непонятно какая у Вас структура HTML тегов.


Еще один вариант скрипта, в котором при повторном клике по заголовку, содержимое спойлера будет плавно скрываться:
Код:
$(document).ready(function(){
$('.spoiler_links').click(function(){
   sp=$(this).parent().children('.spoiler_text');
   txt=$(this).next().html();
   if (txt==sp.html()) sp.hide('normal',function(){ sp.html(''); });
   else sp.hide('normal',function(){ sp.html(txt).show('normal'); });
   return false;
});
});
16.11.2016 22:06:24
Найти все сообщения Цитировать это сообщение
pleymo Не на форуме
Рядовой
*

Сообщений: 5
У нас с: Nov 2016
Сообщение: #58
RE: Несколько спойлеров в одну строку с показом содержимого на всю ширину
Пытался сам подогнать код под свои нужды, не очень получилось, пришлось обратиться к вам.

(16.11.2016 22:06:24)Admin писал(а):  
Код:
$(document).ready(function(){
$('.spoiler_links').click(function(){
   sp=$(this).parent().children('.spoiler_text');
   txt=$(this).next().html();
   if (txt==sp.html()) sp.hide('normal',function(){ sp.html(''); });
   else sp.hide('normal',function(){ sp.html(txt).show('normal'); });
   return false;
});
});

Именно то решение, которое мне так нужно было, можно попросить вас внести последний штрих?

У меня в текстовой области, который открывает спойлер находится иконка с крестиком для закрытия окошка, какой код нужно добавить, чтобы при нажатии на этот крестик, текстовая область также скрывалась плавно?

Класс у иконки .spoiler_exit

Буду очень признателен.

Пардон за флуд,

Пример окошка:

[Изображение: tid_294_7482491.png]
(Последний раз сообщение было отредактировано 18.11.2016 в 18:14:40, отредактировал пользователь pleymo.)
18.11.2016 18:12:38
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #59
RE: Несколько спойлеров в одну строку с показом содержимого на всю ширину
Если на страничке только одна группа спойлеров в строку, то вполне подойдет такой код:
Код:
$('.spoiler_exit').click(function(){
    $('.spoiler_text').hide('normal',function(){ $('.spoiler_text').html(''); });
});
18.11.2016 19:25:51
Найти все сообщения Цитировать это сообщение
pleymo Не на форуме
Рядовой
*

Сообщений: 5
У нас с: Nov 2016
Сообщение: #60
RE: Несколько спойлеров в одну строку с показом содержимого на всю ширину
(18.11.2016 19:25:51)Admin писал(а):  Если на страничке только одна группа спойлеров в строку, то вполне подойдет такой код:
Код:
$('.spoiler_exit').click(function(){
    $('.spoiler_text').hide('normal',function(){ $('.spoiler_text').html(''); });
});

Получается такой скрипт, но закрывать при нажатии на иконку - не закрывает почему-то

Код:
$(document).ready(function(){
$('.spoiler_links').click(function(){

   sp=$(this).parent().children('.spoiler_text');
   txt=$(this).next().html();
   if (txt==sp.html()) sp.hide('normal',function(){ sp.html(''); });
   else sp.hide('normal',function(){ sp.html(txt).show('normal'); });
   return false;

$('.spoiler_exit').click(function(){
   $('.spoiler_text').hide('normal',function(){ $('.spoiler_text').html(''); });

});
});
});

Вот пример верстки:

Код:
<div>
<div>

<a class="spoiler_links">Спойлер 1</a>
<div class="spoiler_body">

Текст от первого спойлера.
<a href="" class="spoiler_exit"></a>

</div>

<a class="spoiler_links">Спойлер 2</a>
<div class="spoiler_body">

Текст от второго спойлера .
<a href="" class="spoiler_exit"></a>

</div>

<div class="spoiler_text"></div>

</div>
</div>

Соответственно у класса "spoiler_exit" имеется бекграунд в стилях.
18.11.2016 21:19:15
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


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


LiveInternet
© Copyright 2011-2024 by UsefulScript.ru