折叠 angular 7 上的响应式导航栏

Question

嗨，我在 angular 7 中使用导航栏，我需要在另一个页面位置单击折叠它，当我调整浏览器大小或在移动设备上使用我的应用程序时，导航栏放置 3 个条形图标用于显示菜单，当我单击另一个位置时应用程序仍然显示菜单，我该如何折叠菜单？

这是我的 HTML 文件。

<nav class="navbar navbar-inverse sub-navbar navbar-fixed-top">
    <div class="container"> 
        <div class="collapse navbar-collapse" id="subenlaces">
            <ul class="nav navbar-nav navbar-right">
                <li><a data-toggle="collapse"routerLink="/">Inicio</a></li>
                <li *ngFor="let item of menu" class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                        aria-expanded="false">{{item.titulo}}<span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li  *ngFor="let subitem of item.secundario">
                            <a routerLink="{{subitem.url}}">
                                {{subitem.titulo}}
                            </a>
                        </li>
                    </ul>
                </li>

...
...

这是菜单，如果我单击白色部分仍然显示菜单，我需要再次单击 3 条图标以折叠它。 如何在单击另一个元素或空白时折叠它？

此致！

Answer 1

所以发生的事情是，您的数据切换仅分配给您的导航栏，而控制导航菜单是打开还是关闭的 javascript 仅在单击 HTML 元素时触发。

如果您希望能够在导航菜单之外单击以将导航菜单切换回来，您可能需要使用模态设计模式。 这意味着您需要一个元素悬停在页面上，该页面具有浅色，但位于页面上的搜索界面下方。 这是一个带有简单模态示例的 CodePen（ https://codepen.io/ifelawal/pen/oNzEvJm ）。

您要注意的是 JS 中的第 2 行存储了模态

var modal = document.getElementById("myModal");

在第 11 行，当单击按钮时，模态框被放置在整个页面的顶部

btn.onclick = function() {
  modal.style.display = "block";
}

然后在 JS 的第 20 行，当他们在 modal-content 之外单击时，模态将被删除

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

这会寻找模态元素外部的单击以将模态切换为消失。 可能会有更多具有特定 angular 知识的人来帮助解决此问题，但在他们到达之前，我会说搜索 angular 的模态切换可能会帮助您更接近您想要的交互。