在角度 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";
  }
}

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