Html 按钮不会在单击时关闭_Html_Css_Button_Bootstrap 4

Html 按钮不会在单击时关闭

html css button bootstrap-4

Html 按钮不会在单击时关闭,html,css,button,bootstrap-4,Html,Css,Button,Bootstrap 4,当我点击导航栏时，它确实会显示菜单（如在我的手机上），但当我再次点击时（像这样的小3行（-）是我在屏幕变小时点击的按钮的样子，因为菜单折叠），当我再次点击时关闭菜单时，它不起作用。我做错了什么我的代码： <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap

当我点击导航栏时，它确实会显示菜单（如在我的手机上），但当我再次点击时（像这样的小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>


$（函数（）{
让pageName=location.pathname.split（'/'）.slice（-1）[0]；
让currentLink=$（'.navbar nav.nav项目a[href=“'+pageName+'”）；
如果（当前链接）{
$（'.navbar nav.nav item'）.removeClass（'active'）；
currentLink.parent（）.addClass（'active'）；
}
});

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

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