当前位置：极客笔记 > HTML > HTML 问答 > Bootstrap下拉菜单点击时关闭的处理方法

Bootstrap下拉菜单点击时关闭的处理方法

Bootstrap下拉菜单点击时关闭的处理方法

参考： Bootstrap dropdown closing when clicked in HTML

在Web开发中，下拉菜单是一种常见的界面元素，用于提供一个包含多个选项的列表，用户可以从中选择一个选项。Bootstrap作为一个流行的前端框架，提供了一套易于使用的下拉菜单组件。然而，在使用Bootstrap下拉菜单时，开发者可能会遇到一个问题：点击下拉菜单内的内容时，下拉菜单会意外关闭。本文将详细介绍如何处理Bootstrap下拉菜单点击时关闭的问题，并提供多个示例代码。

1. 基本的Bootstrap下拉菜单

在深入探讨解决方案之前，让我们先来看一个基本的Bootstrap下拉菜单的示例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Bootstrap Dropdown Example</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action - how2html.com</a>
    <a class="dropdown-item" href="#">Another action - how2html.com</a>
    <a class="dropdown-item" href="#">Something else here - how2html.com</a>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Output:

Bootstrap下拉菜单点击时关闭的处理方法

2. 阻止下拉菜单在点击时关闭

为了阻止下拉菜单在点击时关闭，我们可以通过JavaScript来阻止事件冒泡。以下是一个示例代码，展示了如何实现这一功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Prevent Bootstrap Dropdown from Closing on Click</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action - how2html.com</a>
    <a class="dropdown-item" href="#">Another action - how2html.com</a>
    <form class="px-4 py-3">
      <div class="form-group">
        <label for="exampleDropdownFormEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
      </div>
      <div class="form-group">
        <label for="exampleDropdownFormPassword1">Password</label>
        <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
      </div>
      <button type="submit" class="btn btn-primary">Sign in</button>
    </form>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">New around here? Sign up</a>
    <a class="dropdown-item" href="#">Forgot password?</a>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
(document).ready(function(){('.dropdown-menu').on('click', function(e) {
    if($(e.target).is('form')) {
      e.stopPropagation();
    }
  });
});
</script>
</body>
</html>

Output:

Bootstrap下拉菜单点击时关闭的处理方法

3. 使用自定义JavaScript来控制下拉菜单的关闭行为

除了阻止事件冒泡之外，我们还可以通过自定义JavaScript代码来更精细地控制下拉菜单的关闭行为。以下示例展示了如何在点击下拉菜单内的特定元素时保持下拉菜单打开，而在点击其他区域时关闭下拉菜单。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom Control of Bootstrap Dropdown Closing Behavior</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <a class="dropdown-item" href="#">Action - how2html.com</a>
    <a class="dropdown-item" href="#">Another action - how2html.com</a>
    <a class="dropdown-item" href="#">Something else here - how2html.com</a>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
(document).ready(function(){('.dropdown-menu').on('click', function(e) {
    if($(e.target).hasClass('dropdown-item')) {
      // 在这里可以添加点击dropdown-item后的处理代码
    } else {
      e.stopPropagation();
    }
  });
});
</script>
</body>
</html>

Output:

Bootstrap下拉菜单点击时关闭的处理方法

4. 结合使用Bootstrap和jQuery实现更复杂的下拉菜单行为

在一些情况下，我们可能需要实现更复杂的下拉菜单行为，比如在下拉菜单内部嵌套表单，并且希望在表单提交时不关闭下拉菜单。以下示例展示了如何实现这一功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nested Form in Bootstrap Dropdown</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <form class="px-4 py-3">
      <div class="form-group">
        <label for="exampleDropdownFormEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="email@example.com">
      </div>
      <div class="form-group">
        <label for="exampleDropdownFormPassword1">Password</label>
        <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
      </div>
      <button type="submit" class="btn btn-primary">Sign in</button>
    </form>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">New around here? Sign up - how2html.com</a>
    <a class="dropdown-item" href="#">Forgot password? - how2html.com</a>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
(document).ready(function(){('.dropdown-menu form').on('submit', function(e) {
    e.stopPropagation();
  });
});
</script>
</body>
</html>

Output:

Bootstrap下拉菜单点击时关闭的处理方法

5. 结论

总的来说，处理Bootstrap下拉菜单点击时关闭的问题，主要是通过JavaScript来阻止事件冒泡或者自定义下拉菜单的关闭行为。这些方法可以帮助我们实现更复杂的下拉菜单行为，比如在下拉菜单内部嵌套表单，并且希望在表单提交时不关闭下拉菜单。

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程