时间戳

首页 > 解决方案 > 导航栏切换按钮 - 不会下拉

javascript - 导航栏切换按钮 - 不会下拉

问题描述

我有一个 Django 主页，它有一个 Bootstrap 导航栏，当调整大小时，我让它显示一个切换按钮。我的问题是，当此切换按钮生效时，我无法下拉导航栏项目？我不确定如何解决这个问题。

剪掉这些看起来像什么（作为一个想法）： https ://imgur.com/a/PyiUs38 这是我的进口：

粘贴箱：https ://pastebin.com/QqPiyVxf

    <!-- BOOTSTRAP CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <!-- SCRIPTS -->
    <script src="https://kit.fontawesome.com/879dc93f9e.js" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <!--LOGO-->
  <a class="navbar-brand" style="pointer-events: none">
    <!-- Unclickable -->
    <img src="http://www.w3.org/2000/svg" width="30" height="30" alt="">
  </a>

  <!--MAIN NAV-->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo02">
    {% with request.resolver_match.url_name as url_name %}
    <ul class="navbar-nav">
      <li class="nav-item {% if url_name == 'home' %}active{% endif %}">
        <a class="nav-link" href="{% url 'home' %}">Home</a>
      </li>
      <li class="nav-item {% if url_name == 'about' %}active{% endif %}">
        <a class="nav-link" href="{% url 'about' %}">About</a>
      </li>
      <li class="nav-item {% if url_name == 'projects' %}active{% endif %}">
        <a class="nav-link" href="{% url 'projects' %}">Projects</a>
      </li>
      <li class="nav-item {% if url_name == 'uses' %}active{% endif %}">
        <a class="nav-link" href="{% url 'uses' %}">Uses</a>
      </li>
      <li class="nav-item {% if url_name == 'contact' %}active{% endif %}">
        <a class="nav-link" href="{% url 'contact' %}">Contact</a>
      </li>
    </ul>
    {% endwith %}
  </div>

  <!--SOCIALS-->
  <!-- Twitter -->
  <a class="btn btn-primary" href="#" target="_blank" role="button" style="margin-left: 10px; background-color: #55acee; border-color: #55acee;">
    <i class="fab fa-twitter"></i>
  </a>
  <!-- LinkedIn -->
  <a class="btn btn-primary" href="#" role="button" target="_blank" style="margin: 10px 10px 10px 10px; background-color: #0082ca;border-color: #0082ca">
    <i class="fab fa-linkedin-in"></i>
  </a>
  <!-- Github -->
  <a class="btn btn-primary" href="#" role="button" target="_blank" style="background-color: #333333; border-color: #333333;">
    <i class="fab fa-github"></i>
  </a>
</nav>

这些是我在正文底部的脚本：

<!-- SCRIPTS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

标签： javascripthtmlcssdjangobootstrap-4

解决方案

使用 Bootstrap 5.1 版本更新了工作片段

引导程序5.1

我在您的代码中做了以下更改

  • 我用的是 Bootstrap 5.1 版本
  • 我更改了按钮元素中的以下属性
data-toggle="collapse" 
data-target="#navbarTogglerDemo02"

变成

data-bs-toggle="collapse"
data-bs-target="#navbarTogglerDemo02"

请检查以下工作片段

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <!--LOGO-->
  <a class="navbar-brand" style="pointer-events: none">
    <!-- Unclickable -->
    <img src="http://www.w3.org/2000/svg" width="30" height="30" alt="">
  </a>

  <!--MAIN NAV-->
  
  <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#navbarTogglerDemo02"
      aria-controls="navbarTogglerDemo02"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon"></span>
      </button>
  <div class="collapse navbar-collapse justify-content-md-center" id="navbarTogglerDemo02">
    {% with request.resolver_match.url_name as url_name %}
    <ul class="navbar-nav">
      <li class="nav-item {% if url_name == 'home' %}active{% endif %}">
        <a class="nav-link" href="{% url 'home' %}">Home</a>
      </li>
      <li class="nav-item {% if url_name == 'about' %}active{% endif %}">
        <a class="nav-link" href="{% url 'about' %}">About</a>
      </li>
      <li class="nav-item {% if url_name == 'projects' %}active{% endif %}">
        <a class="nav-link" href="{% url 'projects' %}">Projects</a>
      </li>
      <li class="nav-item {% if url_name == 'uses' %}active{% endif %}">
        <a class="nav-link" href="{% url 'uses' %}">Uses</a>
      </li>
      <li class="nav-item {% if url_name == 'contact' %}active{% endif %}">
        <a class="nav-link" href="{% url 'contact' %}">Contact</a>
      </li>
    </ul>
    {% endwith %}
  </div>

  <!--SOCIALS-->
  <!-- Twitter -->
  <a class="btn btn-primary" href="#" target="_blank" role="button" style="margin-left: 10px; background-color: #55acee; border-color: #55acee;">
    <i class="fab fa-twitter"></i>
  </a>
  <!-- LinkedIn -->
  <a class="btn btn-primary" href="#" role="button" target="_blank" style="margin: 10px 10px 10px 10px; background-color: #0082ca;border-color: #0082ca">
    <i class="fab fa-linkedin-in"></i>
  </a>
  <!-- Github -->
  <a class="btn btn-primary" href="#" role="button" target="_blank" style="background-color: #333333; border-color: #333333;">
    <i class="fab fa-github"></i>
  </a>
</nav>
      
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

使用 Bootstrap 3.4.1 版本更新了工作片段

注意：用于显示链接列表的可切换上下文菜单。与下拉 JavaScript 插件交互。这意味着你必须通过 javascript 调用下拉菜单

前任：

// Call the dropdowns via JavaScript___
$('.dropdown-toggle').dropdown();

请检查以下工作片段

$('.dropdown-toggle').dropdown();
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <!--LOGO-->
  <a class="navbar-brand" style="pointer-events: none">
    <!-- Unclickable -->
    <img src="http://www.w3.org/2000/svg" width="30" height="30" alt="">
  </a>

  <!--MAIN NAV-->
  
  <button
      type="button" 
      class="dropdown-toggle" 
      id="dropdownMenu1" 
      data-toggle="dropdown" 
      aria-haspopup="true" 
      aria-expanded="true"
    >
      <span class="navbar-toggler-icon"></span>
</button>
      
  <div class="collapse navbar-collapse justify-content-md-center dropdown-menu" id="navbar" aria-labelledby="dropdownMenu1">
    {% with request.resolver_match.url_name as url_name %}
    <ul class="navbar-nav">
      <li class="nav-item {% if url_name == 'home' %}active{% endif %}">
        <a class="nav-link" href="{% url 'home' %}">Home</a>
      </li>
      <li class="nav-item {% if url_name == 'about' %}active{% endif %}">
        <a class="nav-link" href="{% url 'about' %}">About</a>
      </li>
      <li class="nav-item {% if url_name == 'projects' %}active{% endif %}">
        <a class="nav-link" href="{% url 'projects' %}">Projects</a>
      </li>
      <li class="nav-item {% if url_name == 'uses' %}active{% endif %}">
        <a class="nav-link" href="{% url 'uses' %}">Uses</a>
      </li>
      <li class="nav-item {% if url_name == 'contact' %}active{% endif %}">
        <a class="nav-link" href="{% url 'contact' %}">Contact</a>
      </li>
    </ul>
    {% endwith %}
  </div>

  <!--SOCIALS-->
  <!-- Twitter -->
  <a class="btn btn-primary" href="#" target="_blank" role="button" style="margin-left: 10px; background-color: #55acee; border-color: #55acee;">
    <i class="fab fa-twitter"></i>
  </a>
  <!-- LinkedIn -->
  <a class="btn btn-primary" href="#" role="button" target="_blank" style="margin: 10px 10px 10px 10px; background-color: #0082ca;border-color: #0082ca">
    <i class="fab fa-linkedin-in"></i>
  </a>
  <!-- Github -->
  <a class="btn btn-primary" href="#" role="button" target="_blank" style="background-color: #333333; border-color: #333333;">
    <i class="fab fa-github"></i>
  </a>
</nav>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

参考链接（我的另一个堆栈溢出答案）：https ://stackoverflow.com/a/69763221/3073842

推荐阅读