Спойлер для Bootstrap v3.3.4

@666FoX666 · Регистрация: 06.10.2014

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

Здравствуйте! Мне нужно реализовать на сайте спойлер. Я попробовал найти в интернете готовый код (который должен работать). Сначала я нашёл "самый простой вариант" буквально в пару строк

PHP
1
2
3
4
5
6
<a href="#spoiler-1" data-toggle="collapse" class="btn btn-primary">Открыть</a>
<div class="collapse" id="spoiler-1">
    <div class="well">
        <p>Текст спойлера</p>
    </div>
</div>

Согласно этому коду (Да и на видеоуроке так показано) должна появиться кнопка "Открыть", которая, собственно, и будет являться спойлером. Но я не знаю почему, но при нажатии на кнопку (Непосредственно на моём сайте), выезжает окошко с надписью "текст спойлера", и на этом собственно функции спойлера заканчиваются, т.к. обратно он почему то не закрывается (Код брал отсюда, видеоурок вот).
В приложении скрин того, в каком "мёртвом положении" остаётся спойлер после открытия. Помогите мне, пожалуйста, где мой косяк, как сделать спойлер нормальным?
Заранее спасибо!

P.S. Потом попробовал замутить спойлер как здесь. Вроде сделал всё как надо, CSS + JS подключил. Но проблема была примерно такая же. Спойлер открывался также "криво", и обратно не закрывался.

@Karssen · 28.10.2015, 11:29

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

@666FoX666 · 29.10.2015, 23:44 **[ТС]**

Хорошо, давайте я расскажу пошагово о своих действиях (вариант более сложного спойлера). Для начала скажу, что у меня одна php страница состоит как бы из 2х. В первой описано вся "тех.часть", во второй сам код (monitor.php и content.php соответственно)
Вот дефолтное содержание файла monitor.php (Файл content.php пока что пустой)

Кликните здесь для просмотра всего текста

PHP
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<?php include "config.php"; ?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Мониторинг серверов NormalGame</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="<?echo $defkey;?>">
    <meta name="description" content="<?echo $defdesc;?>">
    <meta name="robots" content="index,follow">
    <meta name="generator" content="<?echo $version ;?>" />
<meta name="author" content="<?echo $author;?>" />
 
    <!-- Le styles -->
    <link href="/main/css/bootstrap.css" rel="stylesheet">
    <link href="/main/css/bootstrap.css/bootstrap-responsive.css" rel="stylesheet">
 
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="/wp-content/themes/clear-theme/js/html5shiv.js"></script>
    <![endif]-->
 
    <!-- Fav and touch icons -->
                                   <link rel="shortcut icon" href="/wp-content/themes/clear-theme/img/favicon.png">
  </head>
 
  <body>
 
 
<?php
# Header
require_once "include/header.php"; 
?>
    
 
    <div class="container-fluid">
      <div class="row-fluid">
       <div class="col-lg-3">
<?php
# Left Block
require_once "include/leftblock.php"; 
?>
        </div><!--/col-lg-->
 
         <div class="col-lg-9">
          <?php
# Left Block
require_once "modules/monitor/content.php"; 
?>
        </div><!--/col-lg-9-->
      </div><!--/row-->
    </div><!--/.fluid-container-->
 
    <div class="container-fluid">
      <hr>
      <footer>
<?php
# Footer
require_once "include/footer.php"; 
?>
      </footer>
</div>
 
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="/main/js/bootstrap.min.js"></script>
 
  </body>
</html>

Дальше я перехожу туда откуда буду копипастить код (ссылка выше). Пихаю код из графы HTML в свой content.php

Кликните здесь для просмотра всего текста

PHP
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
41
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
 
<body>
  <div class="container">
    <div class="panel panel-default">
      <div class="panel-heading">
        <button type="button" class="btn btn-default btn-xs spoiler-trigger" data-toggle="collapse">Toggle Button</button>
      </div>
      <div class="panel-collapse collapse out">
        <div class="panel-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint, quos, accusamus. Quidem, molestiae. Ipsam consequatur impedit voluptatem, quod qui perferendis fugiat. Eos adipisci dolorem doloremque quos debitis excepturi ex itaque!</p>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <button type="button" class="btn btn-default btn-xs spoiler-trigger" data-toggle="collapse">Toggle Button</button>
      </div>
      <div class="panel-collapse collapse out">
        <div class="panel-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque ullam cupiditate repellat dolorem maxime suscipit labore officiis, commodi aliquam fugit in inventore, eum velit. Ex officia placeat veritatis repellat hic.</p>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <button type="button" class="btn btn-default btn-xs spoiler-trigger" data-toggle="collapse">Toggle Button</button>
      </div>
      <div class="panel-collapse collapse out">
        <div class="panel-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias rerum harum et, earum placeat tempore maiores. Beatae repudiandae aspernatur quae explicabo minus quos tempora illum sed consequuntur? Cumque, est impedit?</p>
        </div>
      </div>
    </div>
  </div>
</body>

Обновляю свою страницу, вижу вот это (1й скрин). Спойлер на нажатие кнопки не реагирует, но мы ведь только в начале пути, верно?

Возвращаюсь на тот самый сайт. На этот раз мне нужно взять код из графы CSS. Я создаю файл bootstrap-spoiler.css и пихаю в него этот код. Получается такое содержимое файла bootstrap-spoiler.css

Кликните здесь для просмотра всего текста

CSS
1
2
3
4
5
6
7
.container {
  margin-top: 10px;
}
 
.panel {
  box-shadow: none !important;
}

Я заливаю этот файл туда, где у меня все css'ки лежат. В моём случае это *site.ru/main/css
Открываю файл monitor.php и после 16й строки пишу такую:

PHP
1
    <link href="/main/css/bootstrap-spoiler.css" rel="stylesheet">

Содержимое файла monitor.php после добавления строки:

Кликните здесь для просмотра всего текста

PHP
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<?php include "config.php"; ?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Мониторинг серверов NormalGame</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="<?echo $defkey;?>">
    <meta name="description" content="<?echo $defdesc;?>">
    <meta name="robots" content="index,follow">
    <meta name="generator" content="<?echo $version ;?>" />
<meta name="author" content="<?echo $author;?>" />
 
    <!-- Le styles -->
    <link href="/main/css/bootstrap.css" rel="stylesheet">
    <link href="/main/css/bootstrap.css/bootstrap-responsive.css" rel="stylesheet">
    <link href="/main/css/bootstrap-spoiler.css" rel="stylesheet">
 
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="/wp-content/themes/clear-theme/js/html5shiv.js"></script>
    <![endif]-->
 
    <!-- Fav and touch icons -->
                                   <link rel="shortcut icon" href="/wp-content/themes/clear-theme/img/favicon.png">
  </head>
 
  <body>
 
 
<?php
# Header
require_once "include/header.php"; 
?>
    
 
    <div class="container-fluid">
      <div class="row-fluid">
       <div class="col-lg-3">
<?php
# Left Block
require_once "include/leftblock.php"; 
?>
        </div><!--/col-lg-->
 
         <div class="col-lg-9">
          <?php
# Left Block
require_once "modules/monitor/content.php"; 
?>
        </div><!--/col-lg-9-->
      </div><!--/row-->
    </div><!--/.fluid-container-->
 
    <div class="container-fluid">
      <hr>
      <footer>
<?php
# Footer
require_once "include/footer.php"; 
?>
      </footer>
</div>
 
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="/main/js/bootstrap.min.js"></script>
 
  </body>
</html>

Сохраняю. Обновляю файл на сервере, обновляю страницу, вижу картину такую (2й скрин). Спойлеры по-прежнему не открываются, но сместились чуть ниже.

Теперь нам нужны JS. Создаю файл bootstrap-spoiler.js. Пихаю в него код из графы JS с того же сайта. Получается такое содержимое файла bootstrap-spoiler.js

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
$(".spoiler-trigger").click(function() {
  $(this).parent().next().collapse('toggle');
});

Также заливаю этот файл туда, где лежат все js'ки. Для меня это *site.ru/main/js/bootstrap-spoiler.js
Открываю файл monitor.php и после 69й строки добавляю такую:

PHP
1
<script src="main/js/bootstrap-spoiler.js"></script>

Содержимое файла monitor.php после добавления строки:

Кликните здесь для просмотра всего текста

PHP
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<?php include "config.php"; ?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Мониторинг серверов NormalGame</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="<?echo $defkey;?>">
    <meta name="description" content="<?echo $defdesc;?>">
    <meta name="robots" content="index,follow">
    <meta name="generator" content="<?echo $version ;?>" />
<meta name="author" content="<?echo $author;?>" />
 
    <!-- Le styles -->
    <link href="/main/css/bootstrap.css" rel="stylesheet">
    <link href="/main/css/bootstrap.css/bootstrap-responsive.css" rel="stylesheet">
    <link href="/main/css/bootstrap-spoiler.css" rel="stylesheet">
 
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="/wp-content/themes/clear-theme/js/html5shiv.js"></script>
    <![endif]-->
 
    <!-- Fav and touch icons -->
                                   <link rel="shortcut icon" href="/wp-content/themes/clear-theme/img/favicon.png">
  </head>
 
  <body>
 
 
<?php
# Header
require_once "include/header.php"; 
?>
    
 
    <div class="container-fluid">
      <div class="row-fluid">
       <div class="col-lg-3">
<?php
# Left Block
require_once "include/leftblock.php"; 
?>
        </div><!--/col-lg-->
 
         <div class="col-lg-9">
          <?php
# Left Block
require_once "modules/monitor/content.php"; 
?>
        </div><!--/col-lg-9-->
      </div><!--/row-->
    </div><!--/.fluid-container-->
 
    <div class="container-fluid">
      <hr>
      <footer>
<?php
# Footer
require_once "include/footer.php"; 
?>
      </footer>
</div>
 
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="/main/js/bootstrap.min.js"></script>
    <script src="main/js/bootstrap-spoiler.js"></script>
 
  </body>
</html>

Опять же сохраняю, обновляю файл на сервере. Обновляю страницу, вуаля, спойлеры открываются (3й скрин). Проблема в том, что они не закрываются. То есть я жму на кнопку, выезжает текст (Причём как-то быстро и некрасиво, в то время как на том сайте, откуда я брал этот код, данный спойлер открывается плавно), и обратно спойлер не закрывается, а остаётся в таком состоянии, как на скриншоте

P.S. Вот примерно как то так. Где я ошибся? Я просто не очень догоняю.

@666FoX666 · 02.11.2015, 18:50 **[ТС]**

Нашёл решение, просто криво был подключён bootstrap.
Вот пример исправления (для меня) в файле monitor.php

Кликните здесь для просмотра всего текста

PHP
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<?php include "config.php"; ?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Мониторинг серверов NormalGame</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="<?echo $defkey;?>">
    <meta name="description" content="<?echo $defdesc;?>">
    <meta name="robots" content="index,follow">
    <meta name="generator" content="<?echo $version ;?>" />
<meta name="author" content="<?echo $author;?>" />
 
    <!-- Le styles -->
    <link href="/main/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="/main/css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
 
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="/wp-content/themes/clear-theme/js/html5shiv.js"></script>
    <![endif]-->
 
    <!-- Fav and touch icons -->
                                   <link rel="shortcut icon" href="/wp-content/themes/clear-theme/img/favicon.png">
  </head>
 
  <body>
 
 
<?php
# Header
require_once "include/header.php"; 
?>
    
 
    <div class="container-fluid">
      <div class="row-fluid">
       <div class="col-lg-3">
<?php
# Left Block
require_once "include/leftblock.php"; 
?>
        </div><!--/col-lg-->
 
         <div class="col-lg-9">
          <?php
# Left Block
require_once "modules/monitor/content.php"; 
?>
        </div><!--/col-lg-9-->
      </div><!--/row-->
    </div><!--/.fluid-container-->
 
    <div class="container-fluid">
      <hr>
      <footer>
<?php
# Footer
require_once "include/footer.php"; 
?>
      </footer>
</div>
 
    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript" src="/main/js/bootstrap.js"></script>
 
  </body>
</html>

Как-то так.

Новые блоги и статьи Все статьи Все блоги /
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.

@Karssen 152 / 151 / 67 Регистрация: 25.02.2015 Сообщений: 493
	28.10.2015, 11:29
	Вы бы хоть свой код приложили, в контексте чего используете спойлер этот. Проверьте какая версия jquery подключена если в вакууме вопрос рассматривать 0