javascript - 如何在展开和关闭下拉引导程序时运行功能

问题描述

下面的代码生成一个带有通知图标的引导导航栏，当我单击通知按钮以展开下拉列表时，我想执行一个函数，当我关闭下拉列表时，如何在 javascript 中执行此操作？

我尝试选择下拉菜单并修改点击功能，但是当您单击下拉菜单中的元素时执行，而不是在您单击按钮时执行。

#ex4 {
    color: white;
    width: auto;
}

#ex4 .p1.has-badge:after {
    position: absolute;
    right: 10%;
    top: 8%;
    content: attr(data-count);
    font-size: 40%;
    padding: .2em;
    border-radius: 50%;
    line-height: 1em;
    color: white;
    background: rgba(255, 0, 0, .85);
    text-align: center;
    min-width: 1.5em;
}

form.logout {
    padding-left: 10px;
}

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

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

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

  <!-- Bootstrap Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

  <!-- Font awesome-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <!-- Page style -->
  <link rel="stylesheet" href="CSS/index.css">

  <!-- Title -->
  <title>Social Feed</title>
  
</head>

<body>
  <nav class="navbar navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">Social Feed</a>
      <div class="d-flex align-items-center">
        <div class="dropdown">
          <a class="btn btn-secondary" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
            <div id="ex4">
              <span class="p1 fa-stack fa-2x has-badge" data-count="0" id="badge">
                <i class="p2 fa fa-bell fa-stack-1x xfa-inverse"></i>
              </span>
            </div>
          </a>
          <div class="dropdown-menu dropdown-menu-end">
            <div id="notifications-header">
              <h1>Notifications</h1>
            </div>
            <div id="notifications">

            </div>
          </div>
        </div>
        <form a name="logout" class="logout" action="PHP/Logout.php" method="get">
          <button type="submit" class="btn btn-danger">Log Out</button>
        </form>
      </div>
    </div>
  </nav>
</body>

</script>
</html>

标签： javascripthtmljquerycssbootstrap-5

var myDropdown = document.getElementById('myDropdown') //expand/open myDropdown.addEventListener('show.bs.dropdown', function () { // do something when opened... }) //hide/close myDropdown.addEventListener('hide.bs.dropdown', function () { // do something when closed... })

javascript - 如何在展开和关闭下拉引导程序时运行功能

问题描述

解决方案

推荐阅读