Спойлер на ajax

@daslex · Регистрация: 02.08.2011

Студворк — интернет-сервис помощи студентам

Есть много блоков <div>
Если происходит клик по блоку то:
---Раскрыт ли какой-нибудь спойлер?
------Да ==> Стереть данные из показываемого, раскрыть новый спойлер. Именно стереть, а не скрыть. Подгружаемый текст должен выгружаться при сокрытии спойлера.

В раскрытый спойлер динамически догрузить html страницу.

================
В один момент времени должен быть раскрыт или только один спойлер, или вообще ничего не раскрыто. Данные, которые были подгружены, но скрываются отображением другого спойлера, должны убиваться, словно они выгружаются со страницы. Они должны не скрываться, а их вообще не должно становиться.

Можно это сделать?

Вот в таком коде, насколько я понял, данные просто сокрыты

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 .spoiler_body {
  display: none;
}
.active{
  display: block;
}
 
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
  <script>
$(function() {
    $(".spoiler_head").click(function() {
        var a = $(this).next(".spoiler_body");
        $(".spoiler_body").not(a.toggleClass("active")).removeClass("active")
    })
});
  </script>
</head>
 
<body>
<div class="spoiler_head">Спойлер №1 (кликните для открытия/закрытия)</div>
<div class="spoiler_body">Текст спойлера 1</div>
<div class="spoiler_head">Спойлер №2 (кликните для открытия/закрытия)</div>
<div class="spoiler_body">Текст спойлера 2</div>
<div class="spoiler_head">Спойлер №3 (кликните для открытия/закрытия)</div>
<div class="spoiler_body">Текст спойлера 3</div>
<div class="spoiler_head">Спойлер №4 (кликните для открытия/закрытия)</div>
<div class="spoiler_body">Текст спойлера 4</div>
</body>
</html>

Мне же нужно такого вида реализацию, только, чтобы данные были не сокрыты, а чтобы их будто бы и нет. Всё, что скрыто, всего этого быть не должно вообще.

Вопрос составил настолько, насколько могу составить.

Это можно сделать?

@svs171 · 28.01.2017, 10:27

можно так, остается вопрос подгрузки данных в открываемый блок

JavaScript
1
2
3
4
5
6
7
$(function() {
    $(".spoiler_head").click(function() {
        $(".spoiler_body.active").html('');
        var a = $(this).next(".spoiler_body");
        $(".spoiler_body").not(a.toggleClass("active")).removeClass("active")
    })
});

@daslex · 28.01.2017, 11:00 **[ТС]**

Так не то. Это загружает всё. Происходит сокрытие-раскрытие. Не динамическая подгрузка. Такой вариант не подходит.

Добавлено через 8 минут

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

Данные, которые были подгружены, но скрываются отображением другого спойлера, должны убиваться, словно они выгружаются со страницы. Они должны не скрываться, а их вообще не должно становиться.

@svs171 · 28.01.2017, 15:14

вот это удаляет данные

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

$(".spoiler_body.active").html('');

а скрывается - уже пустой спойлер

@Kucc · 28.01.2017, 15:31

А почему бы не обернуть в общий блок каждый спойлер с текстом?

HTML5
1
2
3
4
<div>
  <div class="spoiler_head">Спойлер №1 (кликните для открытия/закрытия)</div>
  <div class="spoiler_body">Текст спойлера 1</div>
</div>

JavaScript
1
2
3
4
5
var tab = $('.spoiler_head').on('click', function(e){
   e.preventDefault();
   $('.spoiler_body').addClass('displayNone');
   $(this).siblings('.spoiler_body').toggleClass('show')
}

class show - можно подключить анимацию по плавному появлению и исчезновению через opacity 0 + visibility hiden
class displayNone - так же анимацию по плавному исчезновению

иди просто

JavaScript
1
2
 $('.spoiler_body').fadeOut()
   $(this).siblings('.spoiler_body').fadeIn()

@daslex · 28.01.2017, 15:58 **[ТС]**

Ладно.
Может быть, я не то прошу.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 .spoiler_body {
  display: none;
}
.active{
  display: block;
}
 
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 
  <script>
$(function() {
    $(".spoiler_head").click(function() {
        $(".spoiler_body.active").html('');
        var a = $(this).next(".spoiler_body");
        $(".spoiler_body").not(a.toggleClass("active")).removeClass("active")
    })
});
});
  </script>
</head>
 
<body>
<div class="spoiler_head">Спойлер №1 (кликните для открытия/закрытия)</div>
<div class="spoiler_body"><script>alert('1');</script></div>
<div class="spoiler_head">Спойлер №2 (кликните для открытия/закрытия)</div>
<div class="spoiler_body"><script>alert('2');</script></div>
<div class="spoiler_head">Спойлер №3 (кликните для открытия/закрытия)</div>
<div class="spoiler_body">Текст спойлера 3</div>
<div class="spoiler_head">Спойлер №4 (кликните для открытия/закрытия)</div>
<div class="spoiler_body">Текст спойлера 4</div>
</body>
</html>

Мне нужно, чтобы при первом запуске алертов вообще не было. При открытии конкретного спойлера всплывает конкретный алерт. При закрытии спойлера, алерт закрытого спойлера должен изничтожиться, любой намек на то, что алерт был, должен вообще из DOM пропасть.

Добавлено через 1 минуту

Не по теме:

Мне нужно все без анимаций. Быстро. Просто.

Добавлено через 1 минуту
При каждом клике на спойлер, обозначающем раскрытие спойлера, алерт должен возрождаться, т. е. опять показываться. Просто новый создается и показывается. Феникс мне нужен.

Добавлено через 5 минут
Я хочу избежать выполнениия скриптов, которые по логике выполнятся не должны. Им вообще незачем работать, а они в таком виде, который мне так сильно навязывается, только рады запуститься. Это нехорошо.

Добавлено через 16 минут
Kucc, Ваш код я вообще не понял.
Я ноль в WEB.

Попытка его воссоздать в песочнице ни к чему не привела

HTML5
1
2
3
4
<div>
  <div class="spoiler_head">Спойлер №1 (кликните для открытия/закрытия)</div>
  <div class="spoiler_body">Текст спойлера 1</div>
</div>

JavaScript
1
2
3
4
5
var tab = $('.spoiler_head').on('click', function(e){
   e.preventDefault();
   $('.spoiler_body').addClass('displayNone');
   $(this).siblings('.spoiler_body').toggleClass('show')
}

CSS
1
2
3
4
5
6
 .spoiler_body {
  display: none;
}
.active{
  display: block;
}

@Уф · 30.01.2017, 15:38

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 .spoiler_body {
  display: none;
}
.active{
  display: block;
}
 </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
    var text = ['я первый спол','я второй спол','я третий спол','а я томат'];
    $(".spoiler_head").click(function() {
        $(".spoiler_body").html('');
        var a = $(this).next(".spoiler_body");
        $(".spoiler_body").not(a.toggleClass("active")).removeClass("active");
        a.append( text[a.attr('data-spol')] );
        //вместо обращения к массиву воткнешь тут ajax запрос для загрузки содержимог
        // $.post("load_content.php",{spol: a.attr('data-spol')}, function(data){ a.append(data); });
    });
});
 
</script>
</head>
<body>
<div class="spoiler_head">Спойлер №1 (кликните для открытия/закрытия)</div>
<div class="spoiler_body" data-spol="0"></div>
<div class="spoiler_head">Спойлер №2 (кликните для открытия/закрытия)</div>
<div class="spoiler_body" data-spol="1"></div>
<div class="spoiler_head">Спойлер №3 (кликните для открытия/закрытия)</div>
<div class="spoiler_body" data-spol="2"></div>
<div class="spoiler_head">Спойлер №4 (кликните для открытия/закрытия)</div>
<div class="spoiler_body" data-spol="3"></div>
</body>
</html>

проверять загрузку контента в спойлеры пихая туду программный код, ммм....

Добавлено через 3 минуты
правда у тебя при закрытии одно и того же блока текст в нем не пропадает. но если хочешь можно не грузить после очистки, если спол закрывается

JavaScript
1
        if(a.hasClass('active')) a.append( text[a.attr('data-spol')] );

@daslex · 30.01.2017, 18:30 **[ТС]**

Никто, наверное, не поймет, чего я хотел.
Забейте.

@Уф · 31.01.2017, 09:55

ты хочешь из дерева dom вырезать скрипты?

@daslex · 31.01.2017, 12:53 **[ТС]**

Не надо ничего.
Я не сумел правильно спросить.
Вряд ли я смогу правильно спросить.

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

@Уф · 31.01.2017, 16:29

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

Добавлено через 15 минут
втыкаем код страницы get запросами

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
<script>
$(function() {
    var text = ['1.html','2.html','3.html','4.html']; //адреса страниц
    $(".spoiler_head").click(function() {
        $(".spoiler_body").html('');
        var a = $(this).next(".spoiler_body");
        $(".spoiler_body").not(a.toggleClass("active")).removeClass("active");
        //вместо обращения к массиву воткнешь тут ajax запрос для загрузки содержимог
        $.get(a.attr('data-spol'), {}, function(data){ a.append(data); });
    });
});
</script>

в страницах 1.html, 2.html и тд пишешь код

HTML5
1
<script>alert('kek1').html</script>

это будет работать только на сервере, из локальной папки гет запросы не работают (я к тому что проверяй на сервере)

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114

@daslex 1373 / 596 / 199 Регистрация: 02.08.2011 Сообщений: 2,886
	30.01.2017, 18:30 [ТС]
	Никто, наверное, не поймет, чего я хотел. Забейте. 0

@Уф 890 / 725 / 447 Регистрация: 13.07.2015 Сообщений: 2,277
	31.01.2017, 09:55
	ты хочешь из дерева dom вырезать скрипты? 0

@daslex 1373 / 596 / 199 Регистрация: 02.08.2011 Сообщений: 2,886
	31.01.2017, 12:53 [ТС]
	Не надо ничего. Я не сумел правильно спросить. Вряд ли я смогу правильно спросить. Я хотел, чтобы при первой загрузке скрипты не выполнялись. Чтобы скрипт выполнялся только при раскрытии спойлера. При каждом раскрытии спойлера, чтобы выполнялся. Чтобы выполнялся только тот, который спойлером прячется. 0