Мобильный Navbar не закрывается - PullRequest
Новая
       4

Мобильный Navbar не закрывается

0 голосов
/ 08 января 2020

У меня есть простая навигационная панель: 

<nav class="navbar navbar-expand-lg"> 
      <button onclick="myFunction()" class="navbar-toggler" type="button" data-toggle="collapse" id="navBtn" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="ion-android-menu"></span> </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
          <ul class="navbar-nav">
              <li>
                  <a class="nav-link" href="@Url.Action("Index", "Home")"><i class="fa fa-home fa-1x"> Home</i> </a>
              </li>                 
          </ul>
      </div>
 </nav>

И 2 сценария: 

<script>
    $('.navbar-collapse a').click(function () {
        $(".navbar-collapse").collapse('hide');
        $("#navBtn").attr('aria-expanded', false);
    });
</script>

<script>
    $(document).mouseup(function (e)
    {  
        var container = $(".collapse");

        if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
           // $(".collapse").slideUp();
            // remove class
            $("#navBtn").attr('aria-expanded', false);
            $("#navbarSupportedContent").removeClass("show");
        }

    }); 
</script>

Что мне нужно, так это бутерброд Меню (как они называют эти 3 горизонтальных сложенных полосы) закрывается при нажатии на X (после его открытия). Он открывается нормально, и когда нажимается везде за пределами меню, он закрывается. Но при нажатии на X он закрывается, но сразу же снова открывается ...

Что я могу сделать, чтобы достичь этого? У меня нет ошибок в консоли (элемент проверки), и я попытался настроить класс add / remove и проанализировал поведение в элементе проверки, но я не знаю, почему это происходит ... Спасибо!

EDIT: Как подсказывает DCR, я знаю, что использовал функцию Toggle (), но я все еще не могу заставить ее работать, она либо закрывается и открывается, либо закрывается, но X остается вместо переключения на полосы или смесь этих комбинаций ...

У меня есть это сейчас: 

<script>
    $(document).mouseup(function (e) {
        var container = $(".collapse");

        if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            // remove class
            $("#navbarSupportedContent").removeClass("show");    
            $("#navBtn").attr('aria-expanded', false);
        }
        else {
            $("#navbarSupportedContent").toggle();
        }
    });
</script>

Ответы [ 2 ]

1 голос
/ 10 января 2020

В Bootstrap 4 метод .collapse("hide") скроет складывающуюся часть. 

<nav class="navbar navbar-expand-lg"> 
  <button class="navbar-toggler" type="button" data-toggle="collapse" id="navBtn" data-target="#navbarSupportedContent" aria-expanded="false"
  aria-controls="navbarSupportedContent" aria-label="Toggle navigation"> <span class="ion-android-menu"></span> </button>
  <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
    <ul class="navbar-nav">
      <li>
        <a class="nav-link" href="@Url.Action("Index", "Home")"><i class="fa fa-home fa-1x"> Home</i> </a>
      </li>                 
    </ul>
  </div>
</nav>

При нажатии за пределами меню, например, на X, которого нет в меню, div будет свернуть с помощью свойства hide в .collapse () 

$(document).ready(function() {
  $(document).click(function (event) {
    var Click = $(event.target);
    var Opend = $(".navbar-collapse").hasClass("show");
    if (Opend === true && !Click.hasClass("navbar-toggler")) {
      $("#navbarSupportedContent").collapse("hide");
    }
  });
});
1 голос
/ 08 января 2020 

$('#navBtn').click(function () {
        $(".navbar-collapse").toggle();
        let ariaExpanded = ($(this).attr('aria-expanded') == 'true');
        $(this).attr('aria-expanded',!ariaExpanded);
});
    
    $(document).mouseup(function (e)
    {  
        let container = $(".navbar");
        if (!container.is(e.target) // if the target of the click isn't the container...
            && container.has(e.target).length === 0) // ... nor a descendant of the container
        {
            $("#navBtn").attr('aria-expanded', false);
            $(".navbar-collapse").hide();
        }

    }); 
.navbar-collapse {display: none}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg"> 
      <button onclick="//myFunction()" class="navbar-toggler" type="button" data-toggle="collapse" id="navBtn" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="ion-android-menu">Toggle navigation</span> </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
          <ul class="navbar-nav">
              <li>
                  <a class="nav-link" href='@Url.Action("Index", "Home")'><i class="fa fa-home fa-1x"> Home</i> </a>
              </li>                 
          </ul>
      </div>
 </nav>

Вы можете использовать .toggle () на кнопке, чтобы показать и скрыть навигацию. Когда вы нажимаете в другом месте в do c, вы можете просто скрыть навигацию. Я добавил немного CSS в свой пример, после того как угадал, что у вас может быть.

...