html css javascript我需要在用户单击链接时立即关闭导航窗口_Javascript_Html_Css

html css javascript我需要在用户单击链接时立即关闭导航窗口

javascript html css

html css javascript我需要在用户单击链接时立即关闭导航窗口,javascript,html,css,Javascript,Html,Css,我有一个像导航一样的标签标签ulli嵌入在一个像导航一样的div中当用户点击汉堡包按钮时，背景色会覆盖整个页面，覆盖所有内容，并一直保持这种状态，直到用户点击x关闭它。。嗯，它很麻烦，而且不方便用户使用我需要一个js或jquery调用，以便在用户单击href或按钮时立即关闭分解的div（导航）我对某些链接没有问题，但是当链接指向这样的id时当前的拍卖会让事情变得棘手，尤其是如果用户点击当前拍卖两次，它就会呆在那里盯着我看下面是代码和一些它看起来像什么的图片 <style>

我有一个像导航一样的标签标签ulli嵌入在一个像导航一样的div中

当用户点击汉堡包按钮时，背景色会覆盖整个页面，覆盖所有内容，并一直保持这种状态，直到用户点击x关闭它。。嗯，它很麻烦，而且不方便用户使用我需要一个js或jquery调用，以便在用户单击href或按钮时立即关闭分解的div（导航）

我对某些链接没有问题，但是当链接指向这样的id时

当前的拍卖会让事情变得棘手，尤其是如果用户点击当前拍卖两次，它就会呆在那里盯着我看

下面是代码和一些它看起来像什么的图片

<style>

.navigation-checkbox {
    display: none;
}

.navigation-button {
    background-color: #fff;
    height: 7rem;
    width: 7rem;
    position: fixed;
    top: 7.5rem;
    right: 2rem;
    border-radius: 50%;
    z-index: 2000;
    box-shadow: 0 1rem 3rem rgba(#000, .1);
    text-align: center;
    cursor: pointer;
}

.navigation-background {
    height: 6rem;
    width: 6rem;
    border-radius: 50%;
    position: fixed;
    top: 8rem;
    right: 2rem;
    background-image: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 114, 121, 1) 35%,
    rgba(0, 212, 255, 0.5709286277602523) 100%);
    z-index: 1000;
    transition: transform .8s cubic-bezier(.86, 0, .07, 1);
}

.navigation-nav {
    height: 100vh;
    width: 0;
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1500;
    opacity: 0;
    width: 0;
    transition: all .8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.navigation-list {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    list-style: none;
    text-align: center;
    width: 100%;
}



.navigation-item {
    margin: 1rem;
}

.navigation-item {
    word-spacing: 1rem;
}

.navigation-link:link,
.navigation-link:visited {
    display: inline-block;
    font-size: 3rem;
    font-weight: 300;
    padding: 1rem 2rem;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    background-image: linear-gradient(120deg, transparent 0%, transparent 50%, #fff 50%);
    background-size: 270%;
    transition: all .4s;
}

.navigation-link:link > span,
.navigation-link:visited > span {
    margin-right: 1.5rem;
    display: inline-block;
}

.navigation-link:hover,
.navigation-link:active {
    background-position: 100%;
    color: #8794FA;
    transform: translateX(1rem);
}

.navigation-checkbox:checked ~ .navigation-background {
    transform: scale(80);
}

.navigation-checkbox:checked ~ .navigation-nav {
    opacity: 1;
    width: 100%;
}

/*-------------------icon --------------------*/

.navigation-icon {
    position: relative;
    margin-top: 3.5rem;
}

.navigation-icon::before,
.navigation-icon::after {
    content: "";
    position: absolute;
    left: 0;
    transition: all .2s;
}

.navigation-icon::before {
    top: -.8rem;
}

.navigation-icon::after {
    top: .8rem;
}

.navigation-icon,
.navigation-icon::before,
.navigation-icon::after {
    width: 3rem;
    height: 2px;
    background-color: #333;
    display: inline-block
}

.navigation-button:hover > .navigation-icon::before {
    top: -1rem;
}

.navigation-button:hover > .navigation-icon::after {
    top: 1rem;
}

/*------------------ icon appear and disappear -------*/

.navigation-checkbox:checked + .navigation-button > .navigation-icon {
    background-color: transparent;
}

.navigation-checkbox:checked + .navigation-button > .navigation-icon::before {
    top: 0;
    transform: rotate(135deg);
}

.navigation-checkbox:checked + .navigation-button > .navigation-icon::after {
    top: 0;
    transform: rotate(-135deg);
}


[![enter image description here][1]][1]

</style>


.导航复选框{
显示：无；
}
.导航按钮{
背景色：#fff；
身高：7雷姆；
宽度：7雷姆；
位置：固定；
顶部：7.5雷姆；
右：2rem；
边界半径：50%；
z指数：2000；
盒影：0 1rem 3rem rgba（#000，.1）；
文本对齐：居中；
光标：指针；
}
.导航背景{
身高：6雷姆；
宽度：6雷姆；
边界半径：50%；
位置：固定；
顶部：8rem；
右：2rem；
背景图像：线性梯度（90度，rgba（2,0,36,1）0%，rgba（9,114,121,1）35%，
rgba(0,212,255,0.570928627702523)100%;；
z指数：1000；
变换：变换.8s三次贝塞尔（.86,0,07,1）；
}
.导航导航{
高度：100vh；
宽度：0；
位置：固定；
排名：0；
右：0；
z指数：1500；
不透明度：0；
宽度：0；
过渡：全.8s三次贝塞尔（0.68，-0.55,0.265,1.55）；
}
.导航列表{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
列表样式：无；
文本对齐：居中；
宽度：100%；
}
.导航项{
保证金：1rem；
}
.导航项{
字距：1rem；
}
.导航链接：链接，
.导航链接：已访问{
显示：内联块；
字体大小：3rem；
字体大小：300；
填充：1rem2rem；
颜色：#fff；
文字装饰：无；
文本转换：大写；
背景图像：线性梯度（120度，透明0%，透明50%，#fff 50%）；
背景大小：270%；
过渡：全部。4s；
}
.导航链接：链接>跨度，
.导航链接：已访问>span{
保证金权利：1.5雷姆；
显示：内联块；
}
.导航链接：悬停，
.导航链接：活动{
背景位置：100%；
颜色：#8794FA；
转化：translateX（1rem）；
}
.navigation复选框：选中~.导航背景{
变换：标度（80）；
}
.navigation复选框：选中~.navigation导航{
不透明度：1；
宽度：100%；
}
/*-------------------图标--------------------*/
.导航图标{
位置：相对位置；
最高保证金：3.5雷姆；
}
.导航图标：：之前，
.导航图标：：之后{
内容：“；
位置：绝对位置；
左：0；
过渡：all.2s；
}
.导航图标：：之前{
顶部：-.8rem；
}
.导航图标：：之后{
顶部：.8rem；
}
.导航图标，
.导航图标：：之前，
.导航图标：：之后{
宽度：3rem；
高度：2倍；
背景色：#333；
显示：内联块
}
.navigation按钮：悬停>.navigation图标：：之前{
顶部：-1rem；
}
.navigation按钮：悬停>.navigation图标：：之后{
顶部：1rem；
}
/*------------------图标出现和消失-------*/
.navigation复选框：选中+.navigation按钮>.navigation图标{
背景色：透明；
}
.navigation复选框：选中+.navigation按钮>.navigation图标：：之前{
排名：0；
变换：旋转（135度）；
}
.navigation复选框：选中+.navigation按钮>.navigation图标：：之后{
排名：0；
变换：旋转（-135度）；
}
[！[在此处输入图像描述][1][1]

在此处输入图像描述

一个简单快捷的解决方案是在导航中添加一个事件监听器。您还可以将其附加到文档本身，并使用事件委派方法。我向您的添加了以简化元素，然后在该元素上附加事件侦听器。当您单击一个 <body> <nav th:fragment="nav.html">  <div class="navigation"> <input type="checkbox" class="navigation-checkbox" id="navi-toggle"> <label for="navi-toggle" class="navigation-button"> <span class="navigation-icon"> </span> </label> <div class="navigation-background"> </div> <nav class="navigation-nav"> <ul class="navigation-list"> <li class="navigation-item"><a class="navigation-link" href="/#first-auction">current auctions</a> </li> <li class="navigation-item"><a class="navigation-link" href="#">past auctions</a> </li> <li class="navigation-item"><a href="https://server22.maxanet.com/cgi-bin/mnregister.cgi?restaubid" class="navigation-link">login</a></li> <li class="navigation-item"><a href="https://server22.maxanet.com/cgi-bin/mnregister.cgi?restaubid" class="navigation-link">register</a></li> <li class="navigation-item"><a href="https://server22.maxanet.com/cgi-bin/mnregister.cgi?restaubid" class="navigation-link">update bidder's info</a></li> <li class="navigation-item"><a th:href="@{/about}" class="navigation-link">about</a></li> <li class="navigation-item"><a th:href="@{/contact}" class="navigation-link">contact</a></li> <li class="navigation-item"><a th:href="@{/locations}" class="navigation-link">location</a></li> <li class="navigation-item"><a th:href="@{/referrals}" class="navigation-link">referrals</a></li> <li class="navigation-item"><a th:href="@{/services}" class="navigation-link">buy new at near auction prices</a></li> </ul> </nav> </div> </nav> </body>