Visual Studio Bootstrap 5导航栏下拉菜单不会指向另一个页面，并且正在经历样式故障

uxh89sit  于 2023-08-07  发布在  Bootstrap
关注(0)|答案(2)|浏览(147)

-1
我正在使用Bootstrap 5创建一个网站，我还使用Bootstrap 5创建了导航栏。我添加了我自己的css，这样服务下拉菜单将在悬停时打开。然而，当有人点击服务下拉菜单时，我希望他们被定向到服务页面，但当我点击服务下拉菜单时，什么也没有发生。导航栏上的每个其他下拉菜单都能正常工作，并将用户引导到所需的页面。之前有人告诉我data-bs-toggle=“dropdown”阻止了它重定向到所需的页面，所以我删除了它。我注意到，如果我关闭data-bs-toggle=“dropdown”，在移动的网站上，下拉菜单不会打开和关闭，只会将用户引导到服务页面，但在桌面网站上，它工作得很好。你有什么办法解决这个问题吗？我还注意到，如果我保留data-bs-toggle="dropdown"沿着允许在悬停时打开下拉列表的CSS代码，如果我单击桌面版本的站点上的下拉列表，它将打开，但如果您将光标从下拉列表的项目上移开，则下拉列表上会出现两个白色条。一个在下拉列表的顶部，一个在下拉列表的底部。这是x1c 0d1x的外观

测试. html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Home | </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/index.css" />
<!-- <link rel="stylesheet" href="./css/dropdown.css" /> -->
<link rel="stylesheet" href="./css/login-modal.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="/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="/index.html">
          <img src="./assets/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="/index.html" class="nav-link text-white">Home</a></li>
        <li class="nav-item"><a href="/about.html" class="nav-link text-white">About</a></li>
        <li class="nav-item dropdown" id="dropdown">
          <a class="nav-link dropdown-toggle text-white" href="/services.html" role="button"  aria-expanded="false" data-bs-toggle="dropdown">
          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="/cctv.html">CCTV Services</a></li>
          <li><a class="dropdown-item text-white " href="/datacenter.html">Datacenter Support</a></li>
          <li><a class="dropdown-item text-white" href="/digital-signage.html">Digital Signage</a></li>
          <li><a class="dropdown-item text-white" href="/gen-support.html">General Support</a></li>
          <li><a class="dropdown-item text-white " href="/net-support.html">Network Support</a></li>
          <li><a class="dropdown-item text-white " href="/pos.html">POS Services</a></li>
          <li><a class="dropdown-item text-white " href="/telecom.html">Telecom Services</a></li>
          
          </ul>
        </li>
        <li class="nav-item"><a href="/contact.html" class="nav-link text-white">Contact</a></li>
        <!-- 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

body {
    background: hsl(233, 47%, 96%);
    font-family: 'Poppins', sans-serif;
}

@media (min-width: 576px) {
    .dropdown:hover > .dropdown-menu {
        display: block;
        background-color: hsl(210, 45%, 30%);
        margin-top: 0;
        width: 175px;

        .btn {
            color: hsl(0, 0%, 100%);
        }

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


@media (min-width: 576px) {
    footer li:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
    
    footer i:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
}

#navmenu li{
    background:hsl(210, 45%, 30%);
    transition: all;
}

#navmenu li:hover {
    background: hsl(210, 55%, 41%);
    transition: 0.5s;
}

#sub-header {
    color: hsl(18, 100%, 62%);
}

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

型

添加JS后

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Home | </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/index.css" />
<!-- <link rel="stylesheet" href="./css/dropdown.css" /> -->
<link rel="stylesheet" href="./css/login-modal.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="/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

  </head>
  <body>
    
    <!-- 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="/index.html" class="nav-link text-white">Home</a></li>
  <li class="nav-item"><a href="/about.html" class="nav-link text-white">About</a></li>
  <li class="nav-item dropdown" id="dropdown">
    <a class="nav-link dropdown-toggle" href="/services.html" role="button"  aria-expanded="false">
    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="/cctv.html">CCTV Services</a></li>
    <li><a class="dropdown-item text-white " href="/datacenter.html">Datacenter Support</a></li>
    <li><a class="dropdown-item text-white" href="/digital-signage.html">Digital Signage</a></li>
    <li><a class="dropdown-item text-white" href="/gen-support.html">General Support</a></li>
    <li><a class="dropdown-item text-white " href="/net-support.html">Network Support</a></li>
    <li><a class="dropdown-item text-white " href="/pos.html">POS Services</a></li>
    <li><a class="dropdown-item text-white " href="/telecom.html">Telecom Services</a></li>
    
    </ul>
  </li>
  <li class="nav-item"><a href="/contact.html" class="nav-link text-white">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 -->

    
  </body>
</html>

型

body {
    background: hsl(233, 47%, 96%);
    font-family: 'Poppins', sans-serif;
}

@media (min-width: 576px) {
    .dropdown:hover > .dropdown-menu {
        display: block;
        background-color: hsl(210, 45%, 30%);
        margin-top: 0;
        width: 175px;

        .btn {
            color: hsl(0, 0%, 100%);
        }

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


@media (min-width: 576px) {
    footer li:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
    
    footer i:hover {
        color: hsl(24, 83%, 65%);
        transition: 0.2s;
    }
}

#navmenu li{
    background:hsl(210, 45%, 30%);
    transition: all;
}

#navmenu li:hover {
    background: hsl(210, 55%, 41%);
    transition: 0.5s;
}

#sub-header {
    color: hsl(18, 100%, 62%);
}

#navbar-color {
    background-color: hsl(210, 45%, 30%);
}
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>Home | </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/index.css" />
<!-- <link rel="stylesheet" href="./css/dropdown.css" /> -->
<link rel="stylesheet" href="./css/login-modal.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="/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="/index.html">
          <img src="./assets/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="/index.html" class="nav-link text-white">Home</a></li>
        <li class="nav-item"><a href="/about.html" class="nav-link text-white">About</a></li>
        <li class="nav-item dropdown" id="dropdown">
          <a class="nav-link dropdown-toggle text-white" href="/services.html" role="button"  aria-expanded="false" data-bs-toggle="dropdown">
          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="/cctv.html">CCTV Services</a></li>
          <li><a class="dropdown-item text-white " href="/datacenter.html">Datacenter Support</a></li>
          <li><a class="dropdown-item text-white" href="/digital-signage.html">Digital Signage</a></li>
          <li><a class="dropdown-item text-white" href="/gen-support.html">General Support</a></li>
          <li><a class="dropdown-item text-white " href="/net-support.html">Network Support</a></li>
          <li><a class="dropdown-item text-white " href="/pos.html">POS Services</a></li>
          <li><a class="dropdown-item text-white " href="/telecom.html">Telecom Services</a></li>
          
          </ul>
        </li>
        <li class="nav-item"><a href="/contact.html" class="nav-link text-white">Contact</a></li>
        <!-- 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>

的字符串

visual-studio

2条答案

按热度按时间
qnakjoqk

qnakjoqk1#

我认为这个问题可能是由“服务”链接中的data-bs-toggle=“dropdown”属性引起的。删除此属性后，链接将在桌面上正常工作，但会失去下拉功能。
要解决这个问题，您可以使用JavaScript来处理桌面上的下拉行为，同时允许链接在移动的上工作。

赞(0）分享  回复(0）举报  2023-08-07
ncecgwcz

ncecgwcz2#

首先，从“Services”dropdown锚（）元素中删除**data-bs-toggle=“dropdown”**属性，以允许重定向到服务页面。
您必须向“Services”下拉锚元素添加一个事件侦听器来处理单击事件，并在单击时将用户重定向到服务页面。

<!-- ... (your other code) ... -->

<li class="nav-item dropdown" id="dropdown">
  <a class="nav-link dropdown-toggle text-white" href="/services.html" role="button" aria-expanded="false" id="servicesDropdown">
    Services
  </a>
  <ul class="dropdown-menu">
    <!-- your dropdown menu items -->
  </ul>
</li>

<!-- ... (your other code) ... -->

<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>

字符串
通过这些更改，“服务”下拉菜单现在将在单击时重定向到服务页面，并且悬停效果将应用于桌面设备，允许下拉菜单按预期打开和关闭。

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

相关问题

    查看更多

    热门标签

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

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com