Question

我的自助汉堡菜单出现问题。当我单击菜单时，它会打开以显示其中的链接，但是当我再次单击它或在屏幕上无论如何单击时，它都不会关闭菜单，并且我看不到是什么原因导致了这种中断。

是否有解决方法？甚至包括一些javascript或jquery作为切换关闭或打开的解决方法也将有所帮助。

下面是代码：

<link rel="stylesheet" href="/../style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://js.stripe.com/v3"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<section id="nav-bar">

    <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="/../#"><img src="../img/logo.png"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/../#top">HOME</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#about">ABOUT US</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#courses">OUR COURSES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#services">OUR SERVICES</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="/../#testimonials">TESTIMONIALS</a>
              </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#contact">CONTACT US</a>
                </li>
            </ul>
        </div>
    </nav>
</section>

style.css

/*----------Navigation-------*/
#nav-bar
{
    position: sticky;
    top: 0;
    z-index: 10;
}
.navbar-brand img
{
    height: 60px;
    width: auto;
    padding-left: 30px;
}
.navbar-nav li
{
    padding: 0 10px;
}
.navbar-nav li a
{
    float: right;
    text-align: left;
}
#nav-bar ul li a:hover
{
    color: #747c85!important;
}
.navbar
{
    background: #fff;
}
.navbar-toggler
{
    border: none!important;
}
.nav-link
{
    color: #555!important;
    font-weight: 600;
    font-size: 16px;
}

Answer 1

当我将您的代码放入自己的计算机并对其进行检查时，我发现它正在运行。但是问题是我更喜欢在主体标签之间保留引导代码。您的问题可能是由此引起的。选择身体标签而不是头部标签。还要检查您的引导程序链接。可能不正确。

！重要：

可能还有另一个问题。如果您在网站上使用媒体查询，请在导航栏响应的部分中检查媒体查询。该部分的样式可能产生了错误的结果！

/*----------Navigation-------*/
#nav-bar
{
    position: sticky;
    top: 0;
    z-index: 10;
}
.navbar-brand img
{
    height: 60px;
    width: auto;
    padding-left: 30px;
}
.navbar-nav li
{
    padding: 0 10px;
}
.navbar-nav li a
{
    float: right;
    text-align: left;
}
#nav-bar ul li a:hover
{
    color: #747c85!important;
}
.navbar
{
    background: #fff;
}
.navbar-toggler
{
    border: none!important;
}
.nav-link
{
    color: #555!important;
    font-weight: 600;
    font-size: 16px;
}

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

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>Website Design</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
>


</head>

<body>

<section id="nav-bar">

    <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="/../#"><img src="../img/logo.png"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/../#top">HOME</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#about">ABOUT US</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#courses">OUR COURSES</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#services">OUR SERVICES</a>
                </li>
                <li class="nav-item">
                <a class="nav-link" href="/../#testimonials">TESTIMONIALS</a>
              </li>
                <li class="nav-item">
                    <a class="nav-link" href="/../#contact">CONTACT US</a>
                </li>
            </ul>
        </div>
    </nav>
</section>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>




</body>

</html>

Answer 2

问题在于您的html结构，有许多html标签，正文标签和标头部分放错了地方。我删除了一些进行测试，并且在某些时候菜单可以正常工作，但是正确的解决方案当然是清理并整理整个结构。

点击菜单后，汉堡菜单不会关闭

2 个答案: