单击时按钮未关闭答案

【问题标题】：Button does not close on click单击时按钮未关闭
【发布时间】：2020-10-15 09:09:38
【问题描述】：

当我点击导航栏时，它确实显示了菜单（就像在我的手机上一样），但是当我再次点击（像这样的小 3 行 (-) 时，就像我在屏幕显示时点击的那种按钮一样）小，因为它菜单崩溃）当我再次单击时必须关闭菜单时它不起作用。我做错了什么？

我的代码：

<html>
<head>
<link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
    />
   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet"  href="navbarStyle.css" />

</head>


<body>
    <?php
if (isset($_SESSION['login_success'])) {
    echo ' <nav class="navbar navbar-expand-md navbar-dark bg-dark p-4 sticky-top">';
    echo '<div class="container-fluid">';
    echo ' <a href="#" class="navbar-brand">Brandname</a>';
    echo ' <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" >';
    echo ' <span class="navbar-toggler-icon"></span>';

    echo ' </button>';

    echo ' <div class="collapse navbar-collapse" id="navbarResponsive">';
    echo ' <ul class="navbar-nav ml-auto">';
    echo ' <li class="nav-item active">';
    echo ' <a href="signuphome.php" data-toggle="collapse" data-target=".navbar-collapse" class="nav-link">Home</a>';

    echo ' </li>';

    echo ' <li class="nav-item">';
    echo ' <a href="data.php" data-toggle="collapse" data-target="#navbarResponsive"  class="nav-link">Data</a>';
    echo ' </li>';

    echo ' <li class="nav-item">';
    echo ' <a href="moredata.php" data-toggle="collapse" data-target="#navbarResponsive"  class="nav-link">Datamore</a>';
    echo ' </li>';

    echo '<li class="nav-item">';
    echo ' <a href="profile.php" data-toggle="collapse" data-target="#navbarResponsive"  class="nav-link">Profile</a>';
    echo '</li>';

    echo ' <li class="nav-item">';
    echo ' <a href="about.php" data-toggle="collapse" data-target="#navbarResponsive"  class="nav-link">About</a>';
    echo '</li>';

    echo '<li class="nav-item">';
    echo ' <a href="contacts.php" data-toggle="collapse" data-target="#navbarResponsive"  class="nav-link">Contact us</a>';
    echo '</li>';
    echo '</ul>';

    echo '
    <form action="logoutbackend.php" method="post">
    <button type="submit" name="logout-submit" class="logout_button" style="margin-left:20px; margin-top:12px;  background-color: rgb(33, 128, 46);
    ">Logout</button>
    </form>';

    echo '</div>';

    echo ' </div>';
    echo ' </nav>';

} else {
    echo ' <nav class="navbar navbar-expand-md navbar-dark bg-dark p-4 sticky-top">';
    echo '<div class="container-fluid">';
   
    echo ' <a href="#" class="navbar-brand">ShowCo</a>';
    echo ' <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" >';
    echo ' <span class="navbar-toggler-icon"></span>';

    echo ' </button>';

    echo ' <div class="collapse navbar-collapse" id="navbarResponsive">';
    echo ' <ul class="navbar-nav ml-auto">';
    echo ' <li class="nav-item active">';
    echo ' <a href="index.php" class="nav-link">Home</a>';

    echo ' </li>';

    echo ' <li class="nav-item">';
    echo ' <a href="data.php" class="nav-link">Data</a>';
    echo ' </li>';

    echo ' <li class="nav-item">';
    echo ' <a href="about.php" class="nav-link">About</a>';
    echo '</li>';

    echo '<li class="nav-item">';
    echo ' <a href="contacts.php" class="nav-link">Contact us</a>';
    echo '</li>';
    echo '</ul>';

    echo '</div>';

    echo ' </div>';
    echo ' </nav>';

}
?>
<script>
    $(function() {
        let pageName = location.pathname.split('/').slice(-1)[0];
        let currentLink = $('.navbar-nav .nav-item a[href="' + pageName + '"]');
        if (currentLink) {

          $('.navbar-nav .nav-item').removeClass('active');
          currentLink.parent().addClass('active');
        }
      });
    
    </script>

</body>

</html>

【问题讨论】：

你的意思是，当你点出菜单时，菜单不折叠？在这里很难理解你的问题
@MaxiGui 我的意思是当在菜单上时（如在按钮中），它显示所有菜单内容，如主页、关于等。但是，当我再次单击同一个按钮时，菜单应该折叠或关闭而不是呆在那里。我稍后会在这里发布一张图片。抱歉，如果之前令人困惑。
@MaxiGui 我已经添加了图像并标有红色标记，这是我第二次点击时的按钮，它确实折叠菜单而不是菜单停留在那里。

标签： html css button bootstrap-4

【解决方案1】：

您已包含两次 jquery 文件。这可能会导致问题。

【讨论】：