javascript - 使用 Bootstrap 5 创建下拉菜单后无法收回？
使用 Bootstrap 5 创建下拉菜单后，点击可以展开，但是再次点击无法收回。
这是我的代码：
{% load static %}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="{% static 'plugins/bootstrap-5.3.2/css/bootstrap.min.css' %}"></head><body> <div class="row" style="width: 100%"> <div class="col-3"> <div class="card"> <ul class="list-group list-group-flush"> <li class="list-group-item"> <button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#dropdownContent1" aria-expanded="false" aria-controls="dropdownContent"> 1 Python 解释器 </button> <div class="collapse-show" id="dropdownContent1"> <ul class="list-group list-group-flush"> <li class="list-group-item"><a class="link-secondary link-underline-opacity-0" href="#">1.1 调用解释器</a></li> <li class="list-group-item"><a class="link-secondary link-underline-opacity-0" href="#">1.2 解释器的运行环境</a></li> </ul> </div> </li> <li class="list-group-item"> <button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#dropdownContent2" aria-expanded="false" aria-controls="dropdownContent"> 2 Python 速览 </button> <div class="collapse" id="dropdownContent2"> <ul class="list-group list-group-flush"> <li class="list-group-item"><a class="link-secondary link-underline-opacity-0" href="#">2.1 Python 用作计算器</a></li> <li class="list-group-item"><a class="link-secondary link-underline-opacity-0" href="#">2.2 走向编程的第一步</a></li> </ul> </div> </li> </ul> </div> </div> </div> <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script> <script src="{% static 'plugins/bootstrap-5.3.2/js/bootstrap.min.js' %}"></script> <script src="{% static 'plugins/bootstrap-5.3.2/js/bootstrap.bundle.min.js' %}"></script></body></html>如何解决这个问题？
共有1个答案
你的代码看起来是正确的，应该能够正常工作。Bootstrap 5 的下拉菜单默认就是可以展开和收起的。如果你遇到无法收回的问题，可能是由于某些原因导致 JavaScript 没有正确执行。
以下是一些可能的解决方案：
- 确保你的 jQuery 和 Bootstrap JS 文件是最新版本的。旧版本可能会与新版本的 Bootstrap 5 不兼容。你可以通过
<script>标签检查文件的版本，确保它们是最新的。 - 检查是否有其他 JavaScript 错误。在浏览器的开发者工具中查看控制台，看是否有任何 JavaScript 错误。这些错误可能会阻止 Bootstrap 的下拉菜单功能正常工作。
- 确保你的 HTML 结构是正确的。Bootstrap 的下拉菜单需要正确的 HTML 结构才能正常工作。你的代码看起来是正确的，但如果有任何小的 HTML 错误，比如标签没有正确关闭，也可能导致问题。
- 尝试添加
data-bs-toggle="collapse"和data-bs-target属性到触发下拉菜单的按钮上。这样可以直接控制哪个下拉菜单应该被展开或收起。你的代码中已经有了这些属性，所以这可能不是问题的原因。 - 尝试使用 Bootstrap 的
collapse方法手动控制下拉菜单的展开和收起。例如，你可以使用$('#dropdownContent1').collapse('hide')来手动收起下拉菜单。
如果以上方法都不能解决问题，你可能需要提供更多的信息，比如你的浏览器版本、jQuery 和 Bootstrap 的版本等，以便更好地诊断问题。
-
问题内容： 我需要建立一个包含5个选项的菜单，单击某个菜单后，将出现一个新的子菜单。我完全不知道该怎么做。 问题答案： CSS没有点击处理程序。因此，不可能使用标准CSS。您可以使用一种称为“复选框hack”的方法，但是我谦虚地认为，它有点笨拙，并且会像您的用例要求那样在导航菜单中使用，这很尴尬。因此，我建议使用jQuery或Javascript。这是使用jQuery的一种非常简单的解决方案。 基
-
你好，我正在使用selenium，并且已经成功地设置了id历史的文本字段，但是无法从
-
问题内容： 我已经尝试了大约一周的时间，以找出使用selenium2的下拉菜单。这是我正在使用ITA Matrix 2（http://matrix.itasoftware.com/）自动进行航班搜索的一个项目。一切正常，除了从下拉菜单中选择乘客人数。单击它可以正常工作，但是尝试向其发送键或箭头命令，以及尝试在弹出时创建的新ID都不会执行任何操作。感谢您的帮助！（我是python的新手，我正在做这个
-
我试图创建一个自动的网络会话，我登录到一个网站，并从下拉框中选择一个选项。我能够使用硒进入页面，但我无法点击打开下拉菜单的栏，然后选择我想要的选项。这是页面的截图，它的超文本标记语言代码：[！[在此输入图像描述][1]][1][！[在此输入图像描述][2]][2] 我想单击下拉列表中的“降级性能”选项。我有点被困在这里，因为下拉列表的HTML与[this one][3]根本不相似（无法“选择”）。
-
本文向大家介绍JavaScript简单下拉菜单特效，包括了JavaScript简单下拉菜单特效的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js下拉菜单特效，供大家参考，具体内容如下 实例1：联动的省市下拉菜单 onchange 事件会在域的内容改变时发生。 实例2：三级联动的省市县下拉菜单 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教程。
-
我有一个插入符号指向我的导航项目，一旦点击导航项目，它会显示下拉框，旋转插入符号180并向上指向。唯一的问题是当你点击另一个导航项目时，它隐藏了下拉列表，但插入符号仍然指向上方。这是我用的JavaScript 单击另一导航项后，是否有方法将插入符号旋转回指向下方？