在 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 条图标来折叠它。我怎样才能在单击另一个元素或白色时折叠它 space?

此致！

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 行，当他们在模态内容之外单击时，模态将被删除

// 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 的模式切换可能会帮助您更接近您想要的交互。

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

Collapse responsive navbar on angular 7

html

navbar

responsive-design

web

angular