Question

我已经环顾了SO和谷歌，但我还没有找到我的问题的答案（虽然我觉得这可能是一个非常普遍的问题，但仍然没有运气）。我发现的所有内容都是jQuery，但我不想在没有掌握主JS知识的情况下启动jQuery。

基本上，我有一个简单的网站，我现在正试图制作导航栏的框架。导航栏将下拉以显示其他选项。我唯一的问题是当我离开主要元素时触发下拉列表以及下拉信息时如何使下拉列表保持不变。

我注意到使用CSS :hover而不是JS更容易和更整洁，但我更喜欢使用JS，因为我仍然开始学习一点JS ，所以只是为了获得更多的知识。

请忽略我的代码中的所有颜色和奇怪的格式，它现在只是一个框架，让我更好地看待事物。

PS：抱歉我已经优化了用于调整视图和图像的文本和视频。 SORRY！

提前致谢！：）

＆＃13;

document.getElementById("server").onmouseover = function() {serverMouseOver()};
document.getElementById("server").onmouseout = function() {serverMouseOut()};
function serverMouseOver() {
			document.getElementById("serverdropdownbox").style.display = "block";
			}
function serverMouseOut() {
			document.getElementById("serverdropdownbox").style.display = "none";
			}

＆＃13;

.clearfix	{
			clear: both;
			}

body
			{
			background-color: rgb(21,14,43);
			background-image: url("../images/backgroundimage.jpg");
			background-size: cover;
			background-repeat: no-repeat;
			background-attachment: fixed;
			min-height: 100%;
			background-position: center center;
			overflow: hidden;
			}
	
#gigalogomainbox
			{
			float: left;
			width: 30vw;
			height: 10vw;
			overflow: hidden;
			transform: skewX(20deg);
			margin: 0 0 0 -4vw;
			background-color: white;
			}
			
#gigalogobox
			{
			margin: 0 3vw 0 2vw;
			padding: 0 0 0 2vw;
			width: 100%;
			height: 8vw;
			}
	
#gigalogo
			{
			width: 80%;
			margin: 3vw 2vw 0 0;
			height: 7vw;
			}
			
#steamlogomainbox
			{
			width: 15vw;
			height: 10vw;
			float: right;
			margin: 0 -4vw 0 0;
			background-color: white; /*000c21*/
			transform: skewX(-20deg);
			overflow: hidden;
			}
					
#steamlogobox
			{
			margin: 0 -2vw 0 3vw;
			padding: 0;
			width: 100%;
			height: 20%;
			}
#steamlogo
			{
			padding: 0 0 0 2vw;
			margin: 3vw 0vw 0 0;
			transform: skewX(20deg);
			height: 7vw;
			}

#placeholderbartop
			{
			float: left;
			width: 60%;
			margin: 0;
			padding: 0;
			height: 10vw;
			}
			

#navbarbox			
			{
			clear: both;
			display: block;
			width: 100%;
			height: 5vw;
			padding: 2vw 0 0 0;
			margin: auto;
			}
#navbar, #navbar ul
			{
			width: 100vw;
			height: 5vw;
			background-color: green;
			margin: auto;
			}
			
#navbar li
			{
			color: white;
			list-style: none;
			display: inline-block;
			padding: 1vw 3vw 0 3vw;
			color: red;
			font-size:35px;
			}

#serverdropdownbox
			{
			display: none;
			color: white;
			background-color: darkblue;
			}
			
#serverdropdowncontent
			{
			list-style-type: none;
			width: 15vw;
			margin: 0 0 0 15vw;
			transform: skewX(15deg);
			}
			
			
#serverdropdowncontent li
			{
			border: 1px solid white;
			font-size: 25px;
			text-align: center;
			padding: 1vw 0 1vw 0;
			}
			
.menugradient
			{
			backround: darkblue;
			}
			
#server
			{
			background-color: blue;
			}
			
#server:hover #serverdropdownbox
			{
			display: block;
			}
			
#gigalogomainbox:hover
			{
			background-color: red
			}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<link href="css/mainframe.css" type="text/css" rel=stylesheet>
<script src="scripts/jquery.js"></script>
</head>

<body>


<!--Giga logo, top left-->
<div id="gigalogomainbox" class="clearfix">
	<div id="gigalogobox">
		<img id="gigalogo"  src="images/gigalogo.png">
	</div>
</div>

<!--Steam logo, top right-->
<div id="steamlogomainbox">
	<div id="steamlogobox">
		<img id="steamlogo" src="images/steamlogo.png">
	</div>
</div>

<!--navigation barrrrrr-->
<div id="navbarbox">
	<ul id="navbar">
		<li>Home</li>
		<li id="server">Servers</li>
		<li>Community</li>
		<li>Store</li>
		<li>Download</li>
		<li>Contact</li>
	</ul>


<div id="serverdropdownbox">
	<ul id="serverdropdowncontent">
		<a href="serverlist.html"><li>Server List</li></a>
		<li>GigaDB</li>
		<li>CS:GO</li>
	</ul>
</div>
</div>



<script src="scripts/frame.js"></script>

</body>
</html>

＆＃13;

Answer 1

所以，要解决这个问题，在jQuery中修复它很容易。但是在纯JS中修复它的方法是为＆＃34;服务器＆＃34;创建多个ID。内容（li＆＃39; s，标签）。然后做同样的事情你用＆＃34;服务器＆＃34; JS中的li，但是你为＆＃34;服务器＆＃34;创建了那些id。内容。此外，您应该在id serverdropdowncontent上执行此操作。

祝你好运， Ben A.K.A BlackSky

让导航栏的下拉保持不变

1 个答案: