Форум

snovapavel · #1 (**permalink**) 24.01.2016, 21:09

Добрый день! С Новым Годом, Вас!

Доделываю спойлер здесь:

https://jsfiddle.net/y2kLhqpo/

Мне необходимо реализовать гибкое изменение заголовков спойлера. Чтобы до открытия спойлера, отображался текст, который идёт до символа pipe (|) - например «Показать изображения». А после открытия, текст, который идёт после символа pipe (|) - например «Скрыть все изображения».

Так же нужно предусмотреть вариант, когда в заголовке идёт текст без символа pipe (|). Тогда один текст и до открытия и после.

Я уже даже накидал регулярку, чтобы не утруждать наших уважаемых профессоров (очень уж я регулярки люблю):

На открытие:
    .replace(/\<div class=\"titleSpoiler\"\>(.*?)( |\t)*\|(.*?)\<\/div\>/gm, "$1"); // Здесь будет находиться текст открытия спойлера
На закрытие:
    .replace(/\<div class=\"titleSpoiler\"\>(.*?)( |\t)*\|(.*?)\<\/div\>/gm, "$3"); // Здесь будет находиться текст закрытия спойлера

Но, пока не знаю как её сюда вписать...

рони · #2 (**permalink**) 24.01.2016, 21:36

snovapavel,
Открывашка 250 открытие/закрытие блоков со сменой текста на кнопке. вам повезло юбилейный номер. это шоу будет вечным

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <style type="text/css">
.titleSpoiler {
    font-weight: bold;
    cursor: pointer;
}
.bodySpoiler {
    display: none;
    font-style: italic;
}
.collapseSpoiler {
	margin: 16px 0 0 0;
	color: blue;
    cursor: pointer;
}
  </style>
<script>
$(function() {
    $(".titleSpoiler").each(function(g, a) {
        function e(c) {
            c.preventDefault();
            c = +d.is(":hidden");
            d.slideToggle(200);
            a.text(b[c])
        }
        a = $(a);
        var b = $.trim(a.text()).split("|");
        b.push(b[0]);
        var d = a.next(".bodySpoiler"),
            f = $(".collapseSpoiler", d);
        a.text(b[0]);
        a.click(e);
        f.click(e)
    })
});
</script>


</head>

<body>
<div class="titleSpoiler">Показать изображения | Скрыть все изображения</div>
<div class="bodySpoiler">

    Текст под спойлером
    <br> имеет класс spoiler_body.
    <br> Для придания стиля данному тексту
    <br> просто добавьте еще один класс.

<div class="collapseSpoiler">Свернуть спойлер</div>
</div>
<br>
<div class="titleSpoiler">Показать цитату | Скрыть цитирование автора</div>
<div class="bodySpoiler">

    А это уже текст второго спойлера!
    <br> Данный спойлер также позволяет скрывать
    <br> излишнее на сайте!

<div class="collapseSpoiler">Свернуть спойлер</div>
</div>
<br>
<div class="titleSpoiler">один текст и до открытия и после</div>
<div class="bodySpoiler">

    А это уже текст второго спойлера!
    <br> Данный спойлер также позволяет скрывать
    <br> излишнее на сайте!

<div class="collapseSpoiler">Свернуть спойлер</div>
</div>
</body>
</html>

snovapavel · #3 (**permalink**) 24.01.2016, 21:51

Уважаемый (мною) РОНИ!

Уж от вас я ждал конструктивного ответа. Я изучаю JavaScript и через месяц сам буду отвечать на свои вопросы

А сейчас у меня повис проект. Поэтому, если хотите, можете помочь мне. Я буду очень вам признателен.

рони · #4 (**permalink**) 24.01.2016, 22:09

snovapavel,
посмотрите пост 2, жаль на форуме нет меток, этот пост тоже канет в лету и будет 251

mikeac · #5 (**permalink**) 11.10.2017, 03:00

рони,
Благодарю, почти то, что нужно!
А как прикрутить "авто-гармошку", чтобы по клику на один из заголовков предыдущие закрывались автоматом, если не затруднит, подскажите?

рони · #6 (**permalink**) 11.10.2017, 03:24

mikeac,

$(function() {
    $(".titleSpoiler").each(function(g, a) {
        function e(c) {
            c.preventDefault();
            c = +d.is(":hidden");
            var el = $(".collapseSpoiler").not(f).filter(":visible");
            el.length && el.click();
            d.slideToggle(200);
            a.text(b[c])
        }
        a = $(a);
        var b = $.trim(a.text()).split("|");
        b.push(b[0]);
        var d = a.next(".bodySpoiler"),
            f = $(".collapseSpoiler", d);
        a.text(b[0]);
        a.click(e);
        f.click(e)
    })
});

рони · #7 (**permalink**) 11.10.2017, 03:27

mikeac,
или так

$(function() {
    $(".titleSpoiler").each(function(g, a) {
        function e(c) {
            c.preventDefault();
            c = +d.is(":hidden");
            var el = $(".bodySpoiler:visible").not(d).prev();
            el.length && el.click();
            d.slideToggle(200);
            a.text(b[c])
        }
        a = $(a);
        var b = $.trim(a.text()).split("|");
        b.push(b[0]);
        var d = a.next(".bodySpoiler"),
            f = $(".collapseSpoiler", d);
        a.text(b[0]);
        a.click(e);
        f.click(e)
    })
});

mikeac · #8 (**permalink**) 11.10.2017, 20:18

рони,
Отлично, спасибо!
И, если можно, еще одна задача - прикрутить ко всей этой конструкции отдельную строку "развернуть/свернуть всЁ", подскажите?

рони · #9 (**permalink**) 11.10.2017, 20:24

Сообщение от mikeac

подскажите?

нет

Форум

Справочник

Discord чат

Курсы javascript