css Bootstrap 5导航栏下拉菜单仅打开而不关闭

bf1o4zei  于 2023-08-09  发布在  Bootstrap
关注(0)|答案(1)|浏览(262)

我正在使用Bootstrap 5创建一个网站，并使用它在导航栏中创建一个下拉列表。当你在桌面上悬停在下拉菜单上时，它应该打开，当你在移动的上点击下拉菜单时，它应该打开，当你再次点击它时，它应该关闭，但现在它只是打开。

Test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Navbar</title>
    <!-- <meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." /> -->

<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../css/dropdown.css" />
<!-- <link rel="stylesheet" href="./css/dropdown.css" /> -->

<link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Default"
    disabled
          href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
        >
        <link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Web Awesome"

          href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
        >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css"
          >
        <link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <!-- NAVIGATION BAR START -->
    <nav class="navbar navbar-expand-lg navbar-light py-3 sticky-top" id="navbar-color">
        <div class="container">
          <a href="/Bootstrap-/index.html">
            <img src="./src/img/logo-topnav.png" height="45" width="225" class="img-fluid"/>
          </a>
  
          <!-- TOGGLE MENU START -->
          <button
            type="button"
            class="navbar-toggler"
            data-bs-toggle="collapse"
            data-bs-target="#navmenu"
          >
            <span class="navbar-toggler-icon">
          </button>
          <!-- TOGGLE MENU CLOSE -->
  
          <!-- TOGGLE MENU START -->
        <div class="collapse navbar-collapse" id="navmenu">
          <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a href="/Bootstrap-/index.html" class="nav-link text-white" id="nav_object">Home</a></li>
          <li class="nav-item"><a href="/Bootstrap-/about.html" class="nav-link text-white" id="nav_object">About</a></li>
          <li class="nav-item dropdown" id="dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"  aria-expanded="false" id="">
            Services
            </a>
            <ul class="dropdown-menu">
            <!-- <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li> -->
            <!-- <li><hr class="dropdown-divider"></li> -->
            <li><a class="dropdown-item   text-white" href="/Bootstrap-/cctv.html">CCTV Services</a></li>
            <li><a class="dropdown-item text-white " href="/Bootstrap-/datacenter.html">Datacenter Support</a></li>
            <li><a class="dropdown-item text-white" href="/Bootstrap-/digital-signage.html">Digital Signage</a></li>
            <li><a class="dropdown-item text-white" href="/Bootstrap-/gen-support.html">General Support</a></li>
            <li><a class="dropdown-item text-white " href="/Bootstrap-/net-support.html">Network Support</a></li>
            <li><a class="dropdown-item text-white " href="/Bootstrap-/pos.html">POS Services</a></li>
            <li><a class="dropdown-item text-white " href="/Bootstrap-/telecom.html">Telecom Services</a></li>
            
            </ul>
          </li>
          <li class="nav-item"><a href="/Bootstrap-/contact.html" class="nav-link text-white" id="nav_object">Contact</a></li>
  
          <script>
            // Get the Services dropdown link element
            const servicesDropdown = document.getElementById('servicesDropdown');
          
            // Redirect to the services page when the dropdown link is clicked
            servicesDropdown.addEventListener('click', function(event) {
              event.preventDefault(); // Prevent default link behavior
              window.location.href = this.getAttribute('href');
            });
          
            // Add the hover effect on desktop devices
            if (window.matchMedia('(min-width: 576px)').matches) {
              // When the mouse enters the dropdown link, show the dropdown menu
              servicesDropdown.addEventListener('mouseenter', function() {
                this.setAttribute('aria-expanded', 'true');
                this.nextElementSibling.classList.add('show');
              });
          
              // When the mouse leaves the dropdown link or the dropdown menu, hide the dropdown menu
              servicesDropdown.addEventListener('mouseleave', function() {
                this.setAttribute('aria-expanded', 'false');
                this.nextElementSibling.classList.remove('show');
              });
            }
          </script>
          <!-- TOGGLE MENU CLOSE -->
  
          <!-- LOGIN/SIGNUP MODAL SECTION START -->
      
          <!-- <button 
            type="button" 
            class="btn btn-primary" 
            data-bs-toggle="modal" 
            data-bs-target="#loginmodal"
          >
            Login/Signup
          </button>
          <div id="loginmodal" class="modal fade">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-body">
                  <button
                   
                    type="button" 
                    class="btn-close btn-close-white" 
                    data-bs-dismiss="modal" 
                  ></button>
                  <div class="myform bg-dark">
                    <h1 class="text-center" id="modal-styling">Login Form</h1>
                    <form action="#">
                      <div class="mb-3 mt-3">
                        <label for="email">Email Address</label>
                        <input type="email" class="form-control">
                      </div>
                      <div class="mb-3 mt-3">
                        <label for="password">Password</label>
                        <input type="passeord" class="form-control">
                      </div>
                      <button type="button" class="btn btn-light mt-3">LOGIN</button>
                      <p id="modal-styling">Don't have an account? <a href="#" id="modal-styling">Signup</a> </p>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div> -->
      <!-- LOGIN/SIGNUP MODAL SECTION CLOSE -->
          </ul>
        </div>
        <!-- TOGGLE MENU CLOSE -->
        </div>
      
      </nav>
      <!-- NAVIGATION BAR CLOSE -->
</body>
</html>

字符串

测试. css

.navbar-light .navbar-toggler {
    border: 1px solid hsl(0, 0%, 100%);
    outline: none;
    box-shadow: none;
}

#nav_object {
    position: relative;
}

.dropdown:hover .dropdown-menu {
    display: block;
    background-color: hsl(210, 45%, 30%);
}

.dropdown-item:hover {
    background-color: hsl(210, 55%, 41%);
}

#dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-toggle {
    color: white !important;
    }

#navbar-color {
    background-color: hsl(210, 45%, 30%);
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.nav-link {
    position: relative;
}

.dropdown:hover .dropdown-menu {
    display: block;
    background-color: hsl(210, 45%, 30%);
}

.dropdown-item:hover {
    background-color: hsl(210, 55%, 41%);
}

#nav_object::after {
        content: '';
        opacity: 0;
        transition: all 0.2s;
        height: 2px;
        width: 100%;
        background: hsl(18, 100%, 62%);
        position: absolute;
        bottom: 0;
        left: 0;
    }
    
    #nav_object:hover::after {
        opacity: 1;
    }

@media screen and (max-width: 576px) {
    .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}

型

.navbar-light .navbar-toggler {
    border: 1px solid hsl(0, 0%, 100%);
    outline: none;
    box-shadow: none;
}

#nav_object {
    position: relative;
}

.dropdown:hover .dropdown-menu {
    display: block;
    background-color: hsl(210, 45%, 30%);
}

.dropdown-item:hover {
    background-color: hsl(210, 55%, 41%);
}

#dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-toggle {
    color: white !important;
    }

#navbar-color {
    background-color: hsl(210, 45%, 30%);
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.nav-link {
    position: relative;
}

.dropdown:hover .dropdown-menu {
    display: block;
    background-color: hsl(210, 45%, 30%);
}

.dropdown-item:hover {
    background-color: hsl(210, 55%, 41%);
}

#nav_object::after {
        content: '';
        opacity: 0;
        transition: all 0.2s;
        height: 2px;
        width: 100%;
        background: hsl(18, 100%, 62%);
        position: absolute;
        bottom: 0;
        left: 0;
    }
    
    #nav_object:hover::after {
        opacity: 1;
    }

@media screen and (max-width: 576px) {
    .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test Navbar</title>
    <!-- <meta name="description" content="Write an awesome description for your new site here. It will appear in your document head meta (for Google search results) and in your feed.xml site description." /> -->

<link rel="stylesheet" href="/_bridgetown/static/css/main.c7d4dd3f1984a290e9be.css" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" 
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="../css/dropdown.css" />
<!-- <link rel="stylesheet" href="./css/dropdown.css" /> -->

<link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Default"
    disabled
          href="/css/app-937c1ff7d52fd6f78dd9322599e2b5d4.css?vsn=d"
        >
        <link
          rel="stylesheet"
          data-purpose="Layout StyleSheet"
          title="Web Awesome"

          href="/css/app-wa-8d95b745961f6b33ab3aa1b98a45291a.css?vsn=d"
        >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-solid.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-regular.css"
          >

          <link
            rel="stylesheet"

            href="https://site-assets.fontawesome.com/releases/v6.4.0/css/sharp-light.css"
          >
        <link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <!-- NAVIGATION BAR START -->
    <nav class="navbar navbar-expand-lg navbar-light py-3 sticky-top" id="navbar-color">
        <div class="container">
          <a href="/Bootstrap-/index.html">
            <img src="./src/img/logo-topnav.png" height="45" width="225" class="img-fluid"/>
          </a>
  
          <!-- TOGGLE MENU START -->
          <button
            type="button"
            class="navbar-toggler"
            data-bs-toggle="collapse"
            data-bs-target="#navmenu"
          >
            <span class="navbar-toggler-icon">
          </button>
          <!-- TOGGLE MENU CLOSE -->
  
          <!-- TOGGLE MENU START -->
        <div class="collapse navbar-collapse" id="navmenu">
          <ul class="navbar-nav ms-auto">
          <li class="nav-item"><a href="/Bootstrap-/index.html" class="nav-link text-white" id="nav_object">Home</a></li>
          <li class="nav-item"><a href="/Bootstrap-/about.html" class="nav-link text-white" id="nav_object">About</a></li>
          <li class="nav-item dropdown" id="dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"  aria-expanded="false" id="">
            Services
            </a>
            <ul class="dropdown-menu">
            <!-- <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li> -->
            <!-- <li><hr class="dropdown-divider"></li> -->
            <li><a class="dropdown-item   text-white" href="/Bootstrap-/cctv.html">CCTV Services</a></li>
            <li><a class="dropdown-item text-white " href="/Bootstrap-/datacenter.html">Datacenter Support</a></li>
            <li><a class="dropdown-item text-white" href="/Bootstrap-/digital-signage.html">Digital Signage</a></li>
            <li><a class="dropdown-item text-white" href="/Bootstrap-/gen-support.html">General Support</a></li>
            <li><a class="dropdown-item text-white " href="/Bootstrap-/net-support.html">Network Support</a></li>
            <li><a class="dropdown-item text-white " href="/Bootstrap-/pos.html">POS Services</a></li>
            <li><a class="dropdown-item text-white " href="/Bootstrap-/telecom.html">Telecom Services</a></li>
            
            </ul>
          </li>
          <li class="nav-item"><a href="/Bootstrap-/contact.html" class="nav-link text-white" id="nav_object">Contact</a></li>
  
          <script>
            // Get the Services dropdown link element
            const servicesDropdown = document.getElementById('servicesDropdown');
          
            // Redirect to the services page when the dropdown link is clicked
            servicesDropdown.addEventListener('click', function(event) {
              event.preventDefault(); // Prevent default link behavior
              window.location.href = this.getAttribute('href');
            });
          
            // Add the hover effect on desktop devices
            if (window.matchMedia('(min-width: 576px)').matches) {
              // When the mouse enters the dropdown link, show the dropdown menu
              servicesDropdown.addEventListener('mouseenter', function() {
                this.setAttribute('aria-expanded', 'true');
                this.nextElementSibling.classList.add('show');
              });
          
              // When the mouse leaves the dropdown link or the dropdown menu, hide the dropdown menu
              servicesDropdown.addEventListener('mouseleave', function() {
                this.setAttribute('aria-expanded', 'false');
                this.nextElementSibling.classList.remove('show');
              });
            }
          </script>
          <!-- TOGGLE MENU CLOSE -->
  
          <!-- LOGIN/SIGNUP MODAL SECTION START -->
      
          <!-- <button 
            type="button" 
            class="btn btn-primary" 
            data-bs-toggle="modal" 
            data-bs-target="#loginmodal"
          >
            Login/Signup
          </button>
          <div id="loginmodal" class="modal fade">
            <div class="modal-dialog modal-dialog-centered">
              <div class="modal-content">
                <div class="modal-body">
                  <button
                   
                    type="button" 
                    class="btn-close btn-close-white" 
                    data-bs-dismiss="modal" 
                  ></button>
                  <div class="myform bg-dark">
                    <h1 class="text-center" id="modal-styling">Login Form</h1>
                    <form action="#">
                      <div class="mb-3 mt-3">
                        <label for="email">Email Address</label>
                        <input type="email" class="form-control">
                      </div>
                      <div class="mb-3 mt-3">
                        <label for="password">Password</label>
                        <input type="passeord" class="form-control">
                      </div>
                      <button type="button" class="btn btn-light mt-3">LOGIN</button>
                      <p id="modal-styling">Don't have an account? <a href="#" id="modal-styling">Signup</a> </p>
                    </form>
                  </div>
                </div>
              </div>
            </div>
          </div> -->
      <!-- LOGIN/SIGNUP MODAL SECTION CLOSE -->
          </ul>
        </div>
        <!-- TOGGLE MENU CLOSE -->
        </div>
      
      </nav>
      <!-- NAVIGATION BAR CLOSE -->
</body>
</html>

的字符串

css

1条答案

按热度按时间
h22fl7wq

h22fl7wq1#

如果你说的是服务导航栏在你点击它的时候没有关闭，那可能是因为你的css.dropdown：hover把bootstrap的css搞乱了。

.dropdown:hover .dropdown-menu {
    display: block;
    background-color: hsl(210, 45%, 30%);
}

字符串
此外，代码中还有不必要的重复项。

赞(0）分享  回复(0）举报  2023-08-09
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com