Блог

Главная - Вопросы по программированию - Кнопка не закрывается при нажатии

Кнопка не закрывается при нажатии

#html #css #button #bootstrap-4

#HTML #css #кнопка #bootstrap-4

Вопрос:

Когда я нажимаю на панель навигации, она показывает меню (как на моем телефоне), но когда я нажимаю снова (маленькие 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>

Комментарии:

1. Вы имеете в виду, что при нажатии из меню меню не сворачивается? Здесь трудно понять вашу проблему

2. @MaxiGui я имел в виду, когда в меню (как в кнопке) отображается все содержимое меню, такое как главная, о программе и т. Д. Но, когда я снова нажимаю на ту же кнопку, меню должно свернуться или закрыться, а не оставаться там. Я скоро опубликую изображение здесь. Извините, если раньше это сбивало с толку.

3. @MaxiGui Я добавил изображение и пометил его красной меткой, это кнопка, когда я нажимаю во второй раз, она сворачивает меню, а меню остается там.

Ответ №1:

Вы включили файл jquery два раза. Это может вызвать проблему.