gpt4 book ai didi

jquery - 第二个选择器悬停在多级深度菜单中不起作用

转载 作者:行者123 更新时间:2023-11-28 01:44:17 25 4
gpt4 key购买 nike

为了完成这项工作,我已经奋斗了好几天 - 我开始看到尚未创建的事物从我眼前飘过。

问题是我需要使用零个 Java 或 JQuery 仅使用 CSS 和 HTML 构建一个多级导航系统。

代码源将从 ASP 应用程序生成,因此导航系统的详细信息将存储在数据库中。因此,我可以在代码之外维护 ID 值和所有其他相关方面。

主要问题是试图找到足够的信息来帮助我理解 :HOVER 操作的工作原理 - 因为我无法让其他级别从主级别对 HOVER 使用react。

我需要的是让 2 级菜单变得可见,并在主菜单悬停时仅显示相关选项。当您将鼠标悬停在下一级时,相关菜单也应该只打开。

用户在网站中的点击次数不得超过 3 次,因此我需要快速顺利地显示所有选项,因此我需要在这个示例中只需单击 1 次即可获得最终选择 - 在将鼠标悬停在每个选项上之后选项。

请帮忙。

我的 CSS 代码:

a {text-decoration:none;}
.L2:before {content:"["}
.L2:after {content:"]"}


.L1{
width:30em;
padding:6px;
margin:6px;
background-color:cyan;
border-style:groove;
width:120px;
text-align:center;
position:relative;
display:inline;
vertical-align:text-top;
border-style:groove;
height:2.5em;
border-radius:10px 10px 10px 10px;
z-index:1;
visibility:visible;
}

.mnuL2 {
border-style:groove;
border-radius:10px 10px 10px 10px;
background-color:cyan;
}
.divider {
border-bottom-style:dashed;
}
.Level2{
width:20em;
height:1.8em;
visibility:hidden;
}

div[id^=mnu1] {
position:absolute;
padding:4px;
margin:0 10px 0 0;
display:inline;
top:1.85em;
visibility:visible;
}

div[id^=mnu2] {
position:absolute;
padding:4px;
display:inline;
top:1.85em;
left:5px;
/*visibility:visible;*/
}

.Level3 {
visibility:hidden;
}


div[id^=One] {
position:relative;
top:5px;
left:16px;
display:list-item;
/*visibility:visible;*/
z-index:10;
}

div[id^=Two] {
position:relative;
top:5px;
left:16px;
display:list-item;
visibility:visible;
z-index:10;
}


.L1:hover{
background:lightgray;
}


.L1:hover div[id^=mnu1]{
background:lightgray;
font-style:italic;
}

我的 HTML 代码

<!DOCTYPE html>
<html>
<head>
<link href="OneStyle.css" rel="stylesheet" type="text/css" />
</head>


<body>


<div id="NavSys">
<div class="mnuParent">
<div class=L1 id=mnu01><a href="#"> One</a></div>
<div class=L1 id=mnu02><a href="#">Two</a></div>
<div class=L1 id=mnu03><a href="#">Three</a></div>
</div>

<div class="mnuL2">
<div Class="Level2">
<div class="L2" id="mnu11"><a href="#">One-001</a></div>
<div class="L2" id="mnu12"><a href="#">One-002</a></div>
<div class="L2" id="mnu21"><a href="#">Two-001</a></div>
<div class="L2" id="mnu22"><a href="#">Two-002</a></div>
<div class="L2" id="mnu31"><a href="#">Three-001</a></div>
<div class="L2" id="mnu32"><a href="#">Three-002</a></div>
</div>
<div class="divider"></div>
<div class="Level3">
<div class="L3" id="One11"><a href="#">One11</a></div>
<div class="L3" id="One12"><a href="#">One12</a></div>
<div class="L3" id="One21"><a href="#">One21</a></div>
<div class="L3" id="One22"><a href="#">One22</a></div>
<div class="L3" id="Two11"><a href="#">Two11</a></div>
<div class="L3" id="Two12"><a href="#">Two12</a></div>
<div class="L3" id="Two21"><a href="#">Two21</a></div>
<div class="L3" id="Two22"><a href="#">Two22</a></div>
<div class="L3" id="Three11"><a href="#">Three11</a></div>
<div class="L3" id="Three12"><a href="#">Three12</a></div>
<div class="L3" id="Three21"><a href="#">Three21</a></div>
<div class="L3" id="Three22"><a href="#">Three22</a></div>
</div>
</div>
</div>


</body>
</html>

最佳答案

通常在创建纯 CSS 下拉菜单系统时,子菜单项将嵌套在父按钮中(每个菜单和子菜单通常标记为无序列表)。

您尝试执行的操作永远不会奏效,因为您尝试定位的元素比悬停在其上的元素更靠近 DOM。 CSS 可以向下遍历 DOM 树,但不能向上遍历。

以下是创建纯 CSS 下拉菜单的方法。

我假设您的标记不是一成不变的,并且您实际上可以移动菜单,以便它们嵌套在它们包含的 li 中。

HTML:

<ul class="menu">
<li>
<a href="#">One</a>
<ul class="menu">
<li><a href="#">Sub1 A</a></li>
<li>
<a href="#">Sub1 B</a>
<ul class="menu">
<li><a href="#">Sub2 A</a></li>
<li><a href="#">Sub2 B</a></li>
<li><a href="#">Sub2 C</a></li>
</ul>
</li>
<li><a href="#">Sub1 C</a></li>
</ul>
</li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
</ul>

CSS:

.menu {
padding: 0;
margin: 0;
}
.menu .menu {
display: none;
position: absolute;
left: 0;
width: 200px;
}
.menu .menu .menu {
left: 100%;
top: 0;
}
.menu li {
position: relative;
float: left;
list-style: none;
}
.menu .menu li {
float: none;
}
.menu li:hover > .menu {
display: block;
}
.menu a {
display: block;
border: 1px solid #fff;
padding: 10px;
background: lightgray;
}

这里是一个 fiddle ,展示了这个菜单的实际效果:http://jsfiddle.net/x9TnS/

这是一个基本的概念验证,您可以通过搜索“纯 css 下拉菜单”找到大量更详细的教程。

关于jquery - 第二个选择器悬停在多级深度菜单中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23760671/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com