Начальная загрузка вкладок с выпадающим меню не работает - PullRequest
Новая
       2

Начальная загрузка вкладок с выпадающим меню не работает

0 голосов
/ 22 февраля 2019

Я следовал руководству на официальном сайте Bootstrap, и на этой странице приведен простой пример использования вкладок с выпадающим меню Пример начальной загрузки

И это работает на этой странице, нокогда я добавляю этот код в codepen или в мой проект, он не работает.Все загрузочные зависимости добавлены.Но я заметил странную вещь: когда я использую предыдущую версию, такую ​​как 3.4.0, она работает нормально, без проблем, но с новой версией 4.3.1 - раскрывающееся меню не расширяется.Может я что то не так делаю.

Этот пример с официального сайта начальной загрузки на моей странице codepen, перейдите по этой ссылке и дайте мне несколько советов. Пример Codepen . 

  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#logs"
           role="tab" aria-controls="logs" aria-selected="true">
            Logs
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#scriptMessage"
           role="tab" aria-controls="scriptMessage" aria-selected="false">
            Scripts/Messages
        </a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Submenu 1-1</a>
            <a class="dropdown-item" href="#">Submenu 1-2</a>
            <a class="dropdown-item" href="#">Submenu 1-3</a>
        </div>
    </li>
</ul>

Спасибо, ребята, за вашу помощь! .Я забыл добавить еще одну зависимость, Popper.js или Bootstrap Bundle js (Popper уже включен), в мой проект, но теперь он работает правильно.

Ответы [ 5 ]

0 голосов
/ 22 февраля 2019

Вы пропустили библиотеку jQuery.

и всплывающее окно при нажатии 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src=""></script>

</head>
<body>

<div class="container">
  <h3>Tabs With Dropdown Menu</h3>
  <ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
</div>

</body>
</html>
0 голосов
/ 22 февраля 2019

некоторым компонентам начальной загрузки требуется код javascript для действий.В вашем случае вам нужно поставить js bundle по умолчанию перед закрытием тега body.https://codepen.io/error-yatish/pen/aXgLKg?editors=1000

для справки https://getbootstrap.com/docs/4.3/getting-started/introduction/#js

0 голосов
/ 22 февраля 2019

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

<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#logs"
           role="tab" aria-controls="logs" aria-selected="true">
            Logs
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#scriptMessage"
           role="tab" aria-controls="scriptMessage" aria-selected="false">
            Scripts/Messages
        </a>
    </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu</a>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Submenu 1-1</a>
            <a class="dropdown-item" href="#">Submenu 1-2</a>
            <a class="dropdown-item" href="#">Submenu 1-3</a>
        </div>
    </li>
</ul>
0 голосов
/ 22 февраля 2019

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

<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>

  <body>

    <div class="container">
      <h3>Tabs With Dropdown Menu</h3>
      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Separated link</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>

</html>
0 голосов
/ 22 февраля 2019

Bootstrap имеет свой собственный JavaScript для некоторых функций:

  1. Перейти к этой ссылке
  2. Скопировать ссылку "Complete JavaScript Bundle"
  3. Вставьте эту ссылку в код вашего пера следующим образом: Скриншот настроек пера ( Вы должны добавить его ПОСЛЕ JQuery )

Комплект уже поставляется с необходимымфункции для Bootstrap.Вам просто нужно добавить это и JQuery.

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

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

Нет похожих вопросов

...