Javascript 导航栏未关闭

我有一个简单的导航栏：

<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>

<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>

和两个脚本：

<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>

<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>

$（'.navbar折叠a'）。单击（函数（）{
$（“.navbar collapse”）.collapse（'hide'）；
$（“#navBtn”）.attr（'aria-expanded'，false）；
});
$（文档）.mouseup（函数（e）
{  
var容器=$（“.collapse”）；
if（！container.is（e.target）//如果单击的目标不是容器。。。
&&container.has（e.target）.length==0）/…或容器的后代
{
//$（“.collapse”）.slideUp（）；
//下课
$（“#navBtn”）.attr（'aria-expanded'，false）；
$（“#navbarSupportedContent”）.removeClass（“show”）；
}
}); 

我想要的是三明治菜单（他们称之为3个水平堆叠条纹）在点击X时关闭（一旦打开）。它可以打开，当在菜单外的任何地方单击时，它就会关闭。但当点击X时，它会关闭，但会立即重新打开

我能做些什么来实现这一点？我在控制台（inspect元素）中没有错误，我尝试过调整add/remove类并分析inspect元素中的行为，但我不知道为什么会发生这种情况。。。 谢谢大家!

编辑： 正如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>

$（文档）.mouseup（函数（e）{
var容器=$（“.collapse”）；
if（！container.is（e.target）//如果单击的目标不是容器。。。
&&container.has（e.target）.length==0）/…或容器的后代
{
//下课
$（“#navbarSupportedContent”）.removeClass（“show”）；
$（“#navBtn”）.attr（'aria-expanded'，false）；
}
否则{
$（“#navbarSupportedContent”）.toggle（）；
}
});

$（'#navBtn'）。单击（函数（）{
$（“.navbar collapse”）.toggle（）；
让ariaExpanded=（$（this.attr（'aria-expanded'）=='true'）；
$（this.attr（'aria-expanded'，！aria-expanded'）；
});
$（文档）.mouseup（函数（e）
{  
让容器=$（“.navbar”）；
if（！container.is（e.target）//如果单击的目标不是容器。。。
&&container.has（e.target）.length==0）/…或容器的后代
{
$（“#navBtn”）.attr（'aria-expanded'，false）；
$（“.navbar collapse”）.hide（）；
}
}); 
.navbar collapse{display:none}

切换导航





$（'#navBtn'）。单击（函数（）{
$（“.navbar collapse”）.toggle（）；
让ariaExpanded=（$（this.attr（'aria-expanded'）=='true'）；
$（this.attr（'aria-expanded'，！aria-expanded'）；
});
$（文档）.mouseup（函数（e）
{  
让容器=$（“.navbar”）；
if（！container.is（e.target）//如果单击的目标不是容器。。。
&&container.has（e.target）.length==0）/…或容器的后代
{
$（“#navBtn”）.attr（'aria-expanded'，false）；
$（“.navbar collapse”）.hide（）；
}
}); 
.navbar collapse{display:none}

切换导航




在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>

在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>

不要使用隐藏和显示，而是使用切换。当您单击是否打开、是否关闭和是否打开时。检查jquery的切换功能，或者为Bootstrap 4编写您自己的功能。您会找到正确的方法在上切换“折叠”谢谢您提到这个@DCR，您能看看我编辑的帖子并告诉我有什么问题吗？当我双击菜单按钮时，它关闭，单击1次关闭重新打开它。我再也不明白了…@bron，这对我来说很有用，但是当我尝试将两者结合起来时，就像在我的编辑示例中一样，它不会再关闭，除非我双击X菜单按钮。不要使用隐藏和显示，而是使用切换。当您单击是否打开、是否关闭和是否打开时。检查jquery的切换功能，或者为Bootstrap 4编写您自己的功能。您会找到正确的方法在上切换“折叠”谢谢您提到这个@DCR，您能看看我编辑的帖子并告诉我有什么问题吗？当我双击菜单按钮时，它关闭，单击1次关闭重新打开它。我再也不明白了…@bron，这对我来说很有效，但当我尝试将两者结合起来时，就像我的编辑示例中那样，它不会再关闭，除非我双击X菜单按钮。当单击按钮时，它不会隐藏中堂，这是我的问题。不过，感谢您的努力和代码，它比我的更好/更干净。你知道当再次点击按钮时如何关闭导航吗？@Dimitri-我编辑了它；它现在关闭导航栏。根本的问题是按钮click和另一个document.click连续快速触发和切换导航栏两次。我们需要更改检查，以查看您是否不仅在导航上，而且在按钮上。谢谢！我今晚会查一下，然后再打给你！有些东西坏了，当我用按钮打开/关闭时，一切都很好。只有当菜单打开并且我在容器外部单击时，它才会关闭