个人中心
gpt4 book ai didi

javascript - 单击时未打开下拉菜单

转载 作者：行者123 更新时间：2023-12-02 20:51:50 25 4
gpt4 key购买 nike

单击时导航栏中的下拉菜单未打开。这是 HTML 部分:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.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.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    <link rel="icon" href="brand logo.png" type="image/gif">
    <title>Special Education Notes</title>
</head>
<body>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="#homeImage"><img src="brand logo.png" alt="logo" style="width: 70px;"></a>
    <button class="navbar-toggler" type="button" id="menu-button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" style="font-size: 20px;" href="#about">About Us<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown active">
          <a class="nav-link dropdown-toggle" style="font-size: 20px;" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Notes
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" style="font-size: 20px;" href="bedspl.php">B.Ed Special Education</a>
            <div class="dropdown-divider"></div>
              <a class="dropdown-item" style="font-size: 20px;" href="dedspl.php">D.Ed. Special Education</a>
            </div>
        </li>
        <li class="nav-item active">
          <a class="nav-link" style="font-size: 20px;" href="#contact-us" aria-disabled="true">Contact Us</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" style="font-size: 20px;" href="#" aria-disabled="true">Upload</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active"><span class="nav-link"><a href="https://www.facebook.com/Special-Education-Notes-113164063713889/" target="_blank" style="color: white; font-size: 20px;"><i class="fab fa-facebook-square"></i></a></span></li>
      </ul>
    </div>
  </nav> 
  </body>
  </html>

这是 JavaScript 代码:

$('.navbar-collapse a').click(function() {
});
$('.navbar-collapse a').click(function() {
});

JSFiddle 链接:https://jsfiddle.net/n2jq7uLx/

我希望我的导航栏在选择链接后关闭，但它似乎不适用于导航栏中的下拉菜单。提前致谢。

最佳答案

下拉菜单防护是作为 html anchor 元素 (a) 实现的。在初始化程序代码中，附加了与实现实际导航的叶 anchor 相同的处理程序。

解决方案:
不要将处理程序附加到此元素。

编码:链接的 fiddle 有几个问题:

  • 不包含 jQuery，但使用了 jQuery
  • 处理程序使用未定义的 .collapse 方法。
  • 使用 .hide (这可能是有意的)在这里不起作用，因为要修改其 CSS 的 .navbar-collapse 元素具有 在其 CSS 中用 !important 标记的 display 属性值会覆盖点击处理程序生成的设置。
  • (点击处理程序可能设置在错误的时间点，因为它没有与 dom 树创建显式同步(我还没有检查过这一点，也没有研究过这一点)不再需要，但用 jquery .ready 方法包装处理程序分配))

下面的代码使用更具体的 css 选择器来控制导航栏的 display: flex!important css 属性分配，并从处理程序注册的元素中过滤下拉菜单防护。要隐藏的元素是在从接收该元素的元素开始的自下而上遍历中找到的，这可能比通过其 css 类查询它更有效(尽管没有基准)。

$(document).ready(() => {
    $('.navbar-expand-sm .navbar-collapse a').not(".dropdown-toggle").click(function(eve) {
       $(eve.target).closest(".navbar-expand-sm .navbar-collapse").css('visibility', 'hidden');
    });
});
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
    <link rel="icon" href="brand logo.png" type="image/gif">
    <title>Special Education Notes</title>
</head>
<body>
  <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
    <a class="navbar-brand" href="#homeImage"><img src="brand logo.png" alt="logo" style="width: 70px;"></a>
    <button class="navbar-toggler" type="button" id="menu-button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" style="font-size: 20px;" href="#about">About Us<span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item dropdown active">
          <a class="nav-link dropdown-toggle" style="font-size: 20px;" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Notes
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" style="font-size: 20px;" href="http://www.google.de">B.Ed Special Education</a>
            <div class="dropdown-divider"></div>
              <a class="dropdown-item" style="font-size: 20px;" href="http://www.google.de">D.Ed. Special Education</a>
            </div>
        </li>
        <li class="nav-item active">
          <a class="nav-link" style="font-size: 20px;" href="#contact-us" aria-disabled="true">Contact Us</a>
        </li>
        <li class="nav-item active">
          <a class="nav-link" style="font-size: 20px;" href="#" aria-disabled="true">Upload</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active"><span class="nav-link"><a href="https://www.facebook.com/Special-Education-Notes-113164063713889/" target="_blank" style="color: white; font-size: 20px;"><i class="fab fa-facebook-square"></i></a></span></li>
      </ul>
    </div>
  </nav> 
  </body>
  </html>

关于javascript - 单击时未打开下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61588573/

25 4 0
文章推荐： javascript - React - 提交表单时重定向到第三方网站
文章推荐： azure - 是否可以使用 New Relic 来监控 Azure Function 应用程序？
文章推荐： unit-testing - 为什么 VS2015 Enterprise 中禁用 MSBuild 分析代码覆盖率选项？
文章推荐： javascript - 检查 Javascript 对象的每个键中的特定值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com