html – 隐藏wep应用程序的侧面导航栏

概述我已经构建了一个Angular 4 Web应用程序.当我移动鼠标时,我希望我的导航栏自动隐藏.有一个例子我想使用 https://codepen.io/JFarrow/pen/fFrpg.我在线阅读了一些文档,但我仍然无法弄清楚如何..这是我的navmenu.component.html码： <meta http-equiv="pragma" content="no-cache" /><lin 我已经构建了一个Angular 4 Web应用程序.当我移动鼠标时,我希望我的导航栏自动隐藏.有一个例子我想使用 https://codepen.io/JFarrow/pen/fFrpg.我在线阅读了一些文档,但我仍然无法弄清楚如何..这是我的navmenu.component.HTML码：

<Meta http-equiv="pragma" content="no-cache" /><link rel="stylesheet" type="text/CSS" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/CSS/bootstrap.min.CSS"><script type="text/JavaScript" src="jquery-1.8.3.Js"></script><div class='main-nav'>    <div class='navbar navbar-inverse'>        <div class='navbar-header'>            <a class='navbar-brand' [routerlink]="['/home']">Navbar</a>            <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse'>                <span  (click)="isCollapsed = !isCollapsed">Toggle navigation</span>                <span class='icon-bar'></span>                <span class='icon-bar'></span>                <span class='icon-bar'></span>                <span class='icon-bar'></span>            </button>        </div>        <div class='clearfix'></div>        <div class='navbar-collapse collapse' >                <ul class='nav navbar-nav'>                    <li [routerlinkActive]="['link-active']">                        <a [routerlink]="['/home']">                            <span class='glyphicon glyphicon-home'></span> Home                        </a>                    </li>                    <li [routerlinkActive]="['link-active']">                        <a [routerlink]="['/login']">                            <span class='glyphicon glyphicon-log-in'></span> Log In                        </a>                    </li>                    <li [routerlinkActive]="['link-active']">                        <a [routerlink]="['/margin']">                            <span class='glyphicon glyphicon-List'></span> Report                        </a>                    </li>                    <li [routerlinkActive]="['link-active']">                        <a [routerlink]="['/smart-table']">                            <span class='glyphicon glyphicon-List'></span> Smart table                        </a>                    </li>                </ul></div>    </div></div>

还有我的navmenu.component.ts：

import { Component } from '@angular/core';@Component({    selector: 'nav-menu',templateUrl: './navmenu.component.HTML',styleUrls: ['./navmenu.component.CSS']})export class NavMenuComponent {    public isCollapsed: boolean = false;    public collapsed(event: any): voID {        console.log(event);    }    public expanded(event: any): voID {        console.log(event);    }}

还有我的navmenu.component.CSS：

li .glyphicon {    margin-right: 10px;}/* Highlighting rules for nav menu items */li.link-active a,li.link-active a:hover,li.link-active a:focus {    background-color: #4189C7;    color: white;}/* Keep the nav menu independent of scrolling and on top of other items */.main-nav {    position: fixed;    top: 0;    left: 0;    right: 0;    z-index: 1;}@media (min-wIDth: 768px) {    /* On small screens,convert the nav menu to a vertical sIDebar */    .main-nav {        height: 100%;        wIDth: calc(25% - 20px);    }    .navbar {        border-radius: 0px;        border-wIDth: 0px;        height: 100%;    }    .navbar-header {        float: none;    }    .navbar-collapse {        border-top: 1px solID #444;        padding: 0px;    }    .navbar ul {        float: none;    }    .navbar li {        float: none;        Font-size: 15px;        margin: 6px;    }    .navbar li a {        padding: 10px 16px;        border-radius: 4px;    }    .navbar a {        /* If a menu item's text is too long,truncate it */        wIDth: 100%;        white-space: nowrap;        overflow: hIDden;        text-overflow: ellipsis;    }}

而且我不确定我应该在哪里添加代码.网上有关于添加Js函数的代码,或者在bootstrap函数中使用了一些buID,但对我来说不起作用….

感谢您的帮助.

解决方法 有几种方法可以做到,但这就是我要做的.您需要在整个页面或页面的主体/内容部分添加滚动事件侦听器.如果页面的内容部分是它自己的组件,并且导航栏是它自己的独立组件,那么您可能有一个类似这样的模板.

<navbar-component></navbar-component> <content-component></content-component>

在这种情况下,您可以向内容组件添加滚动侦听器,在滚动发生时切换某些变量,然后在滚动停止时返回它(假设这是您想要的行为).要做到这一点,您可能需要在滚动期间使用去抖动和超时.就像是：

<content-component (scroll)="scrollFunction()"></content-component>  .... and then somewhere in the code for the component that hosts both the navbar and content ...   timeout: any;isScrolling: boolean = false;scrollFunction() : voID {    this.isScrolling = true;   clearTimeout(this.timeout);   this.timeout = setTimeout(()=> {      this.isScrolling = false   },1000);}

那1000个数字是毫秒数,你可以把它设置为你想要的任何东西,但基本上,该功能只是在用户滚动时将isScrolling变量设置为true,一旦它们停止滚动,它最终将被重置为false.那时. clearTimeout事件确保只要滚动继续发生,计时器就会重置为0.如果您使用此方法,那么您可能希望在isScrolling为true时添加一些类的导航栏组件添加类绑定,并在不存在时将其删除.

<navbar-component [class.navbar-hIDden]="isScrolling"></navbar-component><content-component (scroll)="scrollFunction()"></content-component>

我建议将滚动侦听器添加到特定的内容元素而不是文档或@R_502_6055@,因为这会使您的应用程序与DOM更加分离.但是典型的jquery *** 作方式是将滚动侦听器添加到整个文档或@R_502_6055@中,并使用它来切换类.如果您的应用程序将保持小而简单并且您知道它将始终在浏览器中使用,那么以这种方式执行它确实没有问题.您只需更改即可在任何位置添加窗口事件侦听器

(scroll)="scrollFunction()"

至

(window:scroll)="scrollFunction()"

如果你的内容组件不是一个单独的组件,并且它包含navbar-component(也就是说,如果你只是使用主体的主app组件,并且其中有navbar组件),你可以使用HostListener代替模板事件绑定以侦听事件.因此,不是在HTML中添加“(滚动)”事物,而是导入主机侦听器：

import { Component,HostListener,....(anything else you have...) } from '@angular/core'

然后在组件中：

@HostListener('scroll') myScrollFunction() { ... same code here as above....}

这将完成同样的事情,在组件内部检测到滚动事件时触发该功能.您可能希望向导航栏隐藏类添加CSS过渡,因此导航栏可以在视图中整齐地滑动或淡入淡出. 总结

以上是内存溢出为你收集整理的html – 隐藏wep应用程序的侧面导航栏全部内容，希望文章能够帮你解决html – 隐藏wep应用程序的侧面导航栏所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。