个人中心
gpt4 book ai didi

javascript - 响应式导航栏 - 调整大小时元素不会消失

转载 作者：行者123 更新时间：2023-11-28 03:43:08 26 4
gpt4 key购买 nike

在我一直摆弄的这个页面上，我做了一个临时的响应式导航菜单，当窗口变小时，它被一个标准的菜单按钮和一个下拉菜单所取代。

问题是，当我再次调整它的大小时，下拉菜单在原始导航的顶部仍然可见。

我试过使用媒体查询，但没有用。我确实尝试过 jquery，但我遇到的问题是，一旦 jquery 为该框赋予了属性“display:none”，那么用于显示下拉菜单的按钮的 javascript 就停止工作了

这是我正在使用的代码的简化版本...

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.hamburger')) {

    var dropdowns = document.getElementsByClassName("contents");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
/* header */
			
			.header {
					background:#fff;
					width:100%;
					height:170px;
					top:0;
					position:fixed;
					z-index:9999;
					white-space:nowrap;
					clear:both;
					transition:all 0.25s ease;
					border-bottom:1px solid;
			}
			
			
		
			}
			
			
			 .navbar {
				margin-top:130px;
				list-style-type: none;
                text-align: center;
                padding: 0px 0;
				color:#000;
				display:inline-block;
				

            }
			
			.navbar ul li {
                display: inline-block;
                margin-right: 0px;
	           color:#000 ;
            }
			
			
			.navbar ul li a {
                text-decoration: none;
                /* text-transform: uppercase; */
                color:#000 ;
				padding: 12px 12px;
                font-family: century gothic;
				text-align: center;
				display: block;
 
            }
			
			 .navbar ul li:last-child {
                margin-right: 0;
            }
			
			.navbar ul li a.active {
                text-decoration: none;
              /*  text-transform: uppercase; */
                color: #b1f73d;
				padding: 12px 12px;
                font-family: century gothic;
				text-align: center;
				display: block;
				bottom:0px;
            }
			
			
			.nav_a a {
				display: block;
				color: #000;
				text-align: center;
				padding: 12px 12px;
				text-decoration: none;
				font-family: century gothic;
			}
			
			
			.nav_a a:hover {
				color:#b1f73d;
			}
			
			.nav_a a.active:hover {
				color:#b1f73d;
			}
			
			.hdr-bnr {font-family:century gothic;font-weight:lighter;color:#000;font-size:1.25em;}
			
			
			
			
@media (min-width:1046px) and (max-width:9999999999px) {
			
			.hamburger {
				display:none;
				}
			
			.dropdown {
				display:none;
			}

}
			



@media (max-width: 1045px) {
	
			.header {
				background:#fff;
				width:100%;
				height:110px;
				top:0;
				position:fixed;
				z-index:9999;
				white-space:nowrap;
				clear:both;
			}
				
			
			
			.navbar {
				display:none;
				}
				
			
			.hamburger {
				display:block;
			}
			
		
}





/* burger */

.hamburger {
    background-color: #FFF;
    color: #00811f;
    padding: 14px;
    font-size: 3.5em;
    border: 1px;
    cursor: pointer;
	float:right;
	margin-right:5%;
  display:none
	border-radius:5px;
}

.hamburger:hover, .hamburger:focus {
    background-color: #FFF;
	color:#000;
}

.dropdown {
    position: relative;
    display: block;

}

.contents {
	margin-top:110px;
	font-family:century gothic;
    display: none;
	font-size:125%;
    position: absolute;
    background-color: #fff;
    width: 100%;
    overflow: auto;
 
    z-index: 1;
 
	
	
}


.contents a {
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
 
}

.dropdown a:hover {background-color: #00811f; }

.show {display:block; }
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
		


<div class="header">


<nav class="navbar">
            <ul>
                <li class="nav_a"><a class="active" href="javascript:void(0)">Home</a></li>
                <li class="nav_a"><a href="#">page2</a></li>
                <li class="nav_a"><a href="#">page3</a></li>
                <li class="nav_a"><a href="#">page4</a></li>
                <li class="nav_a"><a href="#">page5</a></li>
				
			</ul>
			
</nav>
				 
<button onclick="myFunction()" class="hamburger">☰</button>
		<span class="dropdown">
				<div id="myDropdown" class="contents">
					<a href="#">Home</a>
					<a href="#">page2</a>
					<a href="#">page3</a>
					<a href="#">page4</a>
					<a href="#">page5</a>
		
				</div>
		</span>
		
</div>

<p style="color:#000;margin-top:200px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

抱歉，我尽量减少了体积，有人可以告诉我我做错了什么吗？

谢谢!

最佳答案

好的，因为您在评论中告诉我们以下内容:

If you were to click the hamburger button to reveal the dropdown menu, and then resize the window, you will notice that the dropdown menu still stays there even though I have defined it in the media query to 'display:none'.

这是(据我所知)完全正确的行为，原因如下:

当您单击“汉堡包”按钮时，此单击将为您的菜单下拉菜单切换 class='show'。在这种情况下，单击汉堡包按钮将更改此代码:

<div id="myDropdown" class="contents">
    <a href="#">Home</a>
    <a href="#">page2</a>
    <a href="#">page3</a>
    <a href="#">page4</a>
    <a href="#">page5</a>
</div>

为此:(添加或删除 class='show'；取决于您是打开还是关闭菜单)

<div id="myDropdown" class="contents show">   <---- Adds or removes show class
    <a href="#">Home</a>
    <a href="#">page2</a>
    <a href="#">page3</a>
    <a href="#">page4</a>
    <a href="#">page5</a>
</div>

因此，由于您仅将汉堡包按钮的可见性设置为“display:none”，因此下拉菜单仍保留 class=“show”。最后，您只是让按钮不可见，而不是下拉菜单。

你可以简单地通过改变来解决你的问题

@media (min-width:1046px) and (max-width:9999999999px) {
        .dropdown {
            display:none;
        }
}

成为

@media (min-width:1046px) and (max-width:9999999999px) {
        .dropdown .show { <--- specify that you don't want to show the dropdown if it has the class='show'
            display:none;
        }
}

(如果愿意，您也可以使用 jQuery 实现此目的，方法是在下拉列表中添加或删除“显示”类；或者通过触发下拉列表的“切换”功能)希望对你有帮助

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.hamburger')) {

    var dropdowns = document.getElementsByClassName("contents");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
/* header */
			
			.header {
					background:#fff;
					width:100%;
					height:170px;
					top:0;
					position:fixed;
					z-index:9999;
					white-space:nowrap;
					clear:both;
					transition:all 0.25s ease;
					border-bottom:1px solid;
			}
			
			
		
			}
			
			
			 .navbar {
				margin-top:130px;
				list-style-type: none;
                text-align: center;
                padding: 0px 0;
				color:#000;
				display:inline-block;
				

            }
			
			.navbar ul li {
                display: inline-block;
                margin-right: 0px;
	           color:#000 ;
            }
			
			
			.navbar ul li a {
                text-decoration: none;
                /* text-transform: uppercase; */
                color:#000 ;
				padding: 12px 12px;
                font-family: century gothic;
				text-align: center;
				display: block;
 
            }
			
			 .navbar ul li:last-child {
                margin-right: 0;
            }
			
			.navbar ul li a.active {
                text-decoration: none;
              /*  text-transform: uppercase; */
                color: #b1f73d;
				padding: 12px 12px;
                font-family: century gothic;
				text-align: center;
				display: block;
				bottom:0px;
            }
			
			
			.nav_a a {
				display: block;
				color: #000;
				text-align: center;
				padding: 12px 12px;
				text-decoration: none;
				font-family: century gothic;
			}
			
			
			.nav_a a:hover {
				color:#b1f73d;
			}
			
			.nav_a a.active:hover {
				color:#b1f73d;
			}
			
			.hdr-bnr {font-family:century gothic;font-weight:lighter;color:#000;font-size:1.25em;}
			
			
			
			
@media (min-width:1046px) and (max-width:9999999999px) {
			
			.hamburger {
				display:none;
				}
			
			.dropdown .show {
				display:none;
			}

}
			



@media (max-width: 1045px) {
	
			.header {
				background:#fff;
				width:100%;
				height:110px;
				top:0;
				position:fixed;
				z-index:9999;
				white-space:nowrap;
				clear:both;
			}
				
			
			
			.navbar {
				display:none;
				}
				
			
			.hamburger {
				display:block;
			}
			
		
}





/* burger */

.hamburger {
    background-color: #FFF;
    color: #00811f;
    padding: 14px;
    font-size: 3.5em;
    border: 1px;
    cursor: pointer;
	float:right;
	margin-right:5%;
  display:none
	border-radius:5px;
}

.hamburger:hover, .hamburger:focus {
    background-color: #FFF;
	color:#000;
}

.dropdown {
    position: relative;
    display: block;

}

.contents {
	margin-top:110px;
	font-family:century gothic;
    display: none;
	font-size:125%;
    position: absolute;
    background-color: #fff;
    width: 100%;
    overflow: auto;
 
    z-index: 1;
 
	
	
}


.contents a {
    color: #000;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
 
}

.dropdown a:hover {background-color: #00811f; }

.show {display:block; }
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
		


<div class="header">


<nav class="navbar">
            <ul>
                <li class="nav_a"><a class="active" href="javascript:void(0)">Home</a></li>
                <li class="nav_a"><a href="#">page2</a></li>
                <li class="nav_a"><a href="#">page3</a></li>
                <li class="nav_a"><a href="#">page4</a></li>
                <li class="nav_a"><a href="#">page5</a></li>
				
			</ul>
			
</nav>
				 
<button onclick="myFunction()" class="hamburger">☰</button>
		<span class="dropdown">
				<div id="myDropdown" class="contents">
					<a href="#">Home</a>
					<a href="#">page2</a>
					<a href="#">page3</a>
					<a href="#">page4</a>
					<a href="#">page5</a>
		
				</div>
		</span>
		
</div>

<p style="color:#000;margin-top:200px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

关于javascript - 响应式导航栏 - 调整大小时元素不会消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44113528/

26 4 0
文章推荐： javascript - 单击时突出显示表格行 - 不突出显示第一行
文章推荐： javascript - 2个剪贴板的JS重置功能
文章推荐： javascript - 单击后如何使按钮消失？
文章推荐： CSS - Flexbox 网格上的背景颜色 - 列布局 - 顶行，第一列
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com