Bootstrap Кнопка «Свернуть» не отображает содержимое при нажатии - PullRequest
0 голосов
/ 15 января 2020

Я создал CodePen и попытался с помощью Bootstrap сделать коллапс с помощью кнопки. Я включил библиотеки Bootstrap, JQuery и Popper. CSS Bootstrap работает, потому что моя кнопка стилизована, но когда она нажата, она не отображает содержимое. Я включу блок кода, а также ссылку на полный CodePen. Любые предложения по проекту также приветствуются, но мне просто нужно знать, почему развал не работает. Спасибо за чтение, и я надеюсь, что смогу заставить это работать с помощью yall!

Кнопка:

<button
  data-toggle="collapse"
  data-target="#website-code-container"
  type="button"
  class="btn btn-primary"
>
  Click Me to See the code used
</button>

Отображаемый контент:

<div id="website-code-container" class="collapse"> ... </div>

Ссылка на полный CodePen, это, вероятно, поможет больше: CodePen

Ответы [ 2 ]

0 голосов
/ 15 января 2020

Вы пытаетесь загрузить файлы с локального диска. Это не будет работать, так как доступ к файловой системе в целом не разрешен по соображениям безопасности.

Вместо этого включите соответствующие файлы в свой CodePen или в другое доступное по HTTP расположение:

<link type="text/css" rel="stylesheet" href="E:\Tech Page.css" />
<script src="E:\Tech Page.js"> </script>
0 голосов
/ 15 января 2020

У вас проблема с библиотеками Bootstrap CSS и Popper JS, которые вы импортируете.

Попробуйте импортировать css из Bootstrap CDN, указанный в https://getbootstrap.com/

Не забудьте загрузить jQuery перед загрузкой bootstrap. js

Вот ссылки на CSS и JS для более легкого доступа

CSS только

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">

JS, Поппер. js и jQuery

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" crossorigin="anonymous"></script>

Предыдущие версии библиотек можно найти по адресу https://www.bootstrapcdn.com/legacy/bootstrap/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...