如何使用引导 html 数据切换切换多个数据目标和切换答案

【问题标题】：How do you toggle multiple data targets and toggles using bootstrap html data toggle如何使用引导 html 数据切换切换多个数据目标和切换
【发布时间】：2020-01-02 07:05:39
【问题描述】：

我正在为引导导航栏的动画汉堡图标编写代码，但需要同时切换汉堡图标和引导响应导航栏。那么是否有一些代码或某种方法可以在不同的 id 处切换两条数据。另外，我不能使用 javascript，因为引导导航栏在通过 javascript 切换时没有滑动动画。

这是我已经针对导航栏折叠功能的代码。

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Bootstrap Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <link href="\static\base\css\hamburgers.css" rel="stylesheet">
        <link href="\static\base\css\navbar.css" rel="stylesheet">
    </head>
    <body>
        <nav class="navbar navbar-expand-md bg-dark navbar-dark">
            <button class="hamburger hamburger--squeeze" height="15" id="hamburger" data-target="#collapsibleNavbar" data-toggle="collapse">
          <span class="hamburger-box">
            <span class="hamburger-inner"></span>
          </span>
        </button>
            <a class=" navfont navbar-brand mx-auto" href="/account">Gucci Enterprises</a>
            <div class="navshow">
                {% if user.is_authenticated %}
                    <a href="/account/logout" class="navfont important">Logout</a>
                {% else %}
                    <a href="/account/login" class="navfont important" >Login</a>
                {% endif %}
            </div>
            <div class="collapse navbar-collapse" id="collapsibleNavbar">
                <div class="container">
                    <div style="text-align: center">
                        {% if user.is_authenticated %}
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link navfont" href="/account/profile">Profile</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link navfont" href="/account/profile/edit">Edit Profile</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link navfont" href="/account/change-password">Change Password</a>
                            </li>
                        </ul>
                        {% else %}
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <a class="nav-link navfont" href="/account/register">Register</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link navfont" href="/account/reset-password">Reset Password</a>
                            </li>
                        </ul>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="navhide">
                {% if user.is_authenticated %}
                    <a href="/account/logout" class="navfont important">Logout</a>
                {% else %}
                    <a href="/account/login" class="navfont important">Login</a>
                {% endif %}
            </div>
        </nav>
        <br>
        {% block body %}
        {% endblock %}

    </body>
</html>
'''

【问题讨论】：

你能分享一个最小的、渲染的 html 版本，包含按钮和应该受按钮影响的部分吗？

标签： html css twitter-bootstrap bootstrap-4

【解决方案1】：

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


<button class="btn btn-primary" data-toggle="collapse" data-target=".it-works">It Works</button>

<div class="collapse it-works">Yep.</div>

<div class="collapse it-works">It works.</div>

在应该切换的元素上添加一个类似.multi-collapse 的类，并将data-target=".multi-collapse" 与一个类而不是一个id 一起使用。 bootstrap collapse component multiple targets documentation 表示您可以使用 JQuery 选择器引用它们并包含一个工作示例。

【讨论】：

我试过这个，但它似乎不起作用。即使我多次尝试确保一切正常，数据目标也没有切换
我添加了一个最小的 sn-p。像魅力一样工作。
这不是我需要的，我需要为“汉堡包”和“可折叠导航栏”切换两个不同的东西，即活动和折叠