Создать ответ 
Несколько спойлеров в одну строку с показом содержимого на всю ширину
Автор Сообщение
player Не на форуме
Ефрейтор
*

Сообщений: 10
У нас с: Aug 2014
Сообщение: #11
RE: Несколько спойлеров в одну строку с показом содержимого на всю ширину
Доброго времени суток!
На данный момент пользуюсь вот таким кодом:
Код:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
jQuery.noConflict();
(function($){
$(document).ready(function(){
$('.spoiler_links, .spoiler_text').parent().mouseleave(function(){
$(this).children('.spoiler_text').hide('normal');
});
$('.spoiler_links').click(function(){
$(this).parent().children('.spoiler_text').toggle(false);
$(this).parent().children('.spoiler_text').html( $(this).next().html() ).toggle('normal');
return false;
});
});
})(jQuery);
</script>

Открываются спойлера при клике на них, сейчас понадобилось сделать так чтобы спойлеры открывались просто при наведении мышки. Как это можно сделать применительно к данному коду?
07.10.2014 18:20:15
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #12
RE: Несколько спойлеров в одну строку с показом содержимого на всю ширину
Замените строку:
Код:
$('.spoiler_links').click(function(){

На строку:
Код:
$('.spoiler_links').on('mouseenter', function(){
07.10.2014 18:34:13
Найти все сообщения Цитировать это сообщение
player Не на форуме
Ефрейтор
*

Сообщений: 10
У нас с: Aug 2014
Сообщение: #13
RE: Несколько спойлеров в одну строку с показом содержимого на всю ширину
Большое спасибо!
07.10.2014 18:59:09
Найти все сообщения Цитировать это сообщение
andrey78 Не на форуме
Рядовой
*

Сообщений: 2
У нас с: Jan 2015
Сообщение: #14
RE: Несколько спойлеров в одну строку с показом содержимого на всю ширину
Здравствуйте! Возможно сделать так - когда заходишь на страничку, то первый спойлер был бы уже открыт. Нажимаем на второй, первый закрывается, второй открывается.
06.01.2015 02:15:35
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

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

P.S. Пробовали сделать так, как рекомендовано в комментарии # 1246 к теме Собственный спойлер с плавным открытием и скрытием содержимого.
06.01.2015 13:11:34
Найти все сообщения Цитировать это сообщение
andrey78 Не на форуме
Рядовой
*

Сообщений: 2
У нас с: Jan 2015
Сообщение: #16
RE: Несколько спойлеров в одну строку с показом содержимого на всю ширину
(06.01.2015 13:11:34)Admin писал(а):  P.S. Пробовали сделать так, как рекомендовано в комментарии # 1246 к теме Собственный спойлер с плавным открытием и скрытием содержимого.

То что надо! Спасибо!
06.01.2015 14:40:14
Найти все сообщения Цитировать это сообщение
Rootwar Не на форуме
Рядовой
*

Сообщений: 3
У нас с: Apr 2015
Сообщение: #17
RE: Несколько спойлеров в одну строку с показом содержимого на всю ширину
Admin писал(а):
P.S. Пробовали сделать так, как рекомендовано в комментарии # 1246 к теме Собственный спойлер с плавным открытием и скрытием содержимого.

Здравствуйте!

Я тоже попробовал добавить данный стиль, но спойлеры стали один под другим. Как сделать, чтобы они и дальше стояли в один ряд, но 1 был всегда по умолчанию открыт.
10.04.2015 01:07:10
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

Сообщений: 2,431
У нас с: Aug 2011
Сообщение: #18
RE: Несколько спойлеров в одну строку с показом содержимого на всю ширину
Что-то я похоже там немного неправильно насоветовал. Blush

Вот код:
Код:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script type="text/javascript">
jQuery.noConflict();
(function($){
$(document).ready(function(){
    $(".spoiler_open").each(function(indx){
        $(this).parent().children('.spoiler_text').html( $(this).next().html() );
    });

    $('.spoiler_links, .spoiler_text').parent().mouseleave(function(){
        $(this).children('.spoiler_text').hide('normal');
    });
    $('.spoiler_links').click(function(){
        $(this).parent().children('.spoiler_text').toggle(false);
        $(this).parent().children('.spoiler_text').html( $(this).next().html() ).toggle('normal');
        return false;
    });
});
})(jQuery);
</script>

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

<div>
<a href="" class="spoiler_links ">Спойлер №1 (кликните для показа/скрытия)</a>
<div class="spoiler_body">
Текст под спойлером<br>
плавно появляется<br>
и плавно исчезает<br>
при клике по спойлеру
</div>

<a href="" class="spoiler_links spoiler_open">Спойлер №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>
10.04.2015 19:31:04
Найти все сообщения Цитировать это сообщение
Rootwar Не на форуме
Рядовой
*

Сообщений: 3
У нас с: Apr 2015
Сообщение: #19
RE: Несколько спойлеров в одну строку с показом содержимого на всю ширину
Прошу прощения, возможно, я неправильно объяснил. Хотел получить такой эффект:

По умолчанию, Спойлер №1 должен быть открыт и показывать содержимое.
Пример:
[Изображение: tid_294.png]

При нажатии на Спойлер №2 он открывается, а Спойлер № 1 закрывается.
Пример:
[Изображение: tid_294_2.png]
11.04.2015 17:58:59
Найти все сообщения Цитировать это сообщение
Admin Не на форуме
Верховный
Главнокомандующий
(Administrator)
*

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

Попробуйте использовать код:
Код:
<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(){
$(".sp_open").each(function(indx){
    $(this).parent().children('.sp_text').html( $(this).next().html() );
});

$('.sp_links').click(function(){
    text=$(this).next().html();

    $(this).parent().children('.sp_text').hide('normal', function() {
        $(this).parent().children('.sp_text').html(text).toggle('normal');
    });
    return false;
});
});
</script>

<style type="text/css">
    .sp_body {display:none;}
    .sp_links {cursor:pointer;}
</style>

<div>
<a href="" class="sp_links sp_open">Спойлер №1</a>
<div class="sp_body">
Текст под спойлером<br>
плавно появляется<br>
и плавно исчезает<br>
при клике по спойлеру
</div>

<a href="" class="sp_links">Спойлер №2</a>
<div class="sp_body">
Текст под спойлером<br>
плавно появляется
</div>

<div class="sp_text"></div>
</div>

Либо вот такой:
Код:
<style type="text/css">
.spoiler_body { overflow:hidden; font-style:italic; }
.spoiler_links { cursor:pointer; font-weight:bold; text-decoration:underline; }
</style>

<span class="spoiler_links">Скрыть / показать</span>
<div class="spoiler_body">
Текст под спойлером<br>
имеет класс spoiler_body.<br>
Для придания стиля данному тексту<br>
просто добавьте еще один класс.
</div>

<br><br>

<span class="spoiler_links">Скрыть / показать</span>
<div class="spoiler_body">
А это уже текст второго спойлера!<br>
Данный спойлер также позволяет скрывать<br>
излишнее на сайте!
</div>

<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_body").each(function(indx){$(this).data("body_height",$(this).height());});

$('.spoiler_links').click(function(){
if ($(this).next('.spoiler_body').height()>'20') { $(this).next('.spoiler_body').animate({height:'20'},'normal'); }
else $(this).next('.spoiler_body').animate({height:$(this).next('.spoiler_body').data​("body_height")},'normal');
return false;
});
});
</script>
11.04.2015 19:54:52
Найти все сообщения Цитировать это сообщение
Создать ответ 


Переход:


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


LiveInternet
© Copyright 2011-2024 by UsefulScript.ru