我有一个带有子菜单(垂直)的菜单。我的第一个 li
在子菜单中处于事件状态。
我的问题是,当我将鼠标悬停在另一个 li
中时,我在最后一个菜单中添加了子菜单。
我需要的是:
- 当我将鼠标悬停在菜单中时,仅获取当前 li 的子菜单
- 当我的光标未悬停在菜单中时,获取具有
on class
的默认子菜单
这是jsFiddle的链接
http://jsfiddle.net/bymb6kvm/2/
这是我的代码:
<nav>
<div id="menuu">
<ul class="niveau1">
<li><a id="lrf" class="sousmenu" href="#">Test 1</a>
<ul id="lrfH" class="niveau2 on">
<li><a href="#">ss test 1</a></li>
<li><a href="#">ss test 2</a></li>
</ul>
</li>
<li><a id="cm" class="sousmenu" href="#">Test 2</a>
<ul id="cmH" class="niveau2">
<li><a href="#">ss test 1</a></li>
<li><a href="#">ss test 2</a></li>
</ul>
</li>
<li><a id="dj" class="sousmenu" href="#">Test 3</a>
<ul id="djH" class="niveau2">
<li><a href="#">ss test 1</a></li>
<li><a href="#">ss test 2</a></li>
</ul>
</li>
</ul>
</div>
</nav>
CSS代码
#menuu ul{
margin:0;
padding:0;
padding-left:97px;
line-height:30px;
}
#menuu li{
float: left;
list-style: outside none none;
}
.sousmenu{
color: #000 !important;
text-decoration:none;
width:150px;
height:30px;
display:block;
text-align:center;
border:1px solid #000;
}
.niveau2{
margin-left: -50px !important;
}
.niveau2 a{
padding-left:20px !important;
text-decoration:none;
color:red ;
}
.sousmenu:hover{
color: #fff !important;
background-color: #ddd;
border-bottom-color: #000 !important;
}
#menuu ul ul{
position:absolute;
visibility:hidden;
padding-left:0px;
}
#menuu ul ul li:hover a{
color:#000;
}
#menuu ul ul ul{
left:152px;
top:-0.5px;
display:none;
}
#menuu ul li:hover ul{
visibility:visible;
}
.niveau2.on{
visibility:visible !important;
}
JS代码
$(document).ready(function(e){
$('.sousmenu').hover(function(e){
e.preventDefault();
var getID=$(this).attr('id');
$("#"+getID+"H").css("visibility","visible");
$(".on").css("visibility","hidden");
});
});
最佳答案
试试这个:
$(document).ready(function(e) {
$('.sousmenu').hover(function(e) {
e.preventDefault();
var getID = $(this).attr('id');
$(".niveau2").hide();
$("#" + getID + "H").show();
});
});
#menuu ul {
margin: 0;
padding: 0;
padding-left: 97px;
line-height: 30px;
}
#menuu li {
float: left;
list-style: outside none none;
}
.sousmenu {
color: #000 !important;
text-decoration: none;
width: 150px;
height: 30px;
display: block;
text-align: center;
border: 1px solid #000;
}
.niveau2 {
margin-left: -50px !important;
}
.niveau2 a {
padding-left: 20px !important;
text-decoration: none;
color: red;
}
.sousmenu:hover {
color: #fff !important;
background-color: #ddd;
border-bottom-color: #000 !important;
}
#menuu ul ul {
position: absolute;
visibility: hidden;
padding-left: 0px;
}
#menuu ul ul li:hover a {
color: #000;
}
#menuu ul ul ul {
left: 152px;
top: -0.5px;
display: none;
}
#menuu ul li:hover ul {
visibility: visible;
}
.niveau2.on {
visibility: visible !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<nav>
<div id="menuu">
<ul class="niveau1">
<li><a id="lrf" class="sousmenu" href="#">Test 1</a>
<ul id="lrfH" class="niveau2 on">
<li><a href="#">ss test 1</a></li>
<li><a href="#">ss test 2</a></li>
</ul>
</li>
<li><a id="cm" class="sousmenu" href="#">Test 2</a>
<ul id="cmH" class="niveau2">
<li><a href="#">ss test 1</a></li>
<li><a href="#">ss test 2</a></li>
</ul>
</li>
<li><a id="dj" class="sousmenu" href="#">Test 3</a>
<ul id="djH" class="niveau2">
<li><a href="#">ss test 1</a></li>
<li><a href="#">ss test 2</a></li>
</ul>
</li>
</ul>
</div>
</nav>
关于javascript - 如何在悬停时显示子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33189730/