请在这里找到我的详细代码:https://jsfiddle.net/d8rduvjc/1/
我想用 jQuery 创建一个导航;因此,我使用了FadeIn 和FadeOut 命令。为此,我分配了一个 <div>
作为 FadeItem。
因为会有一些子菜单,我会在导航菜单中有多个 FadeItems。并非所有按钮都具有完全相同的设计,因为其中一些将淡入/淡出 在按钮下方,而其他按钮将淡入/淡出 < em>紧挨着按钮。
因此,我尝试将FadeItems分为FadeItem_01和FadeItem_02。但是,现在我遇到的问题是 FadeItem_02 不会再出现在按钮的旁边。相反,它出现在按钮下方。
我必须在我的代码中更改什么才能使 FadeItem_01 出现在按钮下方 并且FadeItem_02 出现在紧接着 到按钮?
最佳答案
请检查是你想要的,
$(document).ready(function() {
$(".button_desktop_01, .button_desktop_02").mouseenter(function() {
$(this).children(".FadeItem_01, .FadeItem_02").fadeIn(500);
});
$(".button_desktop_01, .button_desktop_02").mouseleave(function() {
$(this).children(".FadeItem_01, .FadeItem_02").fadeOut(500);
});
});
.button_desktop_01 {
float: left;
position: relative;
padding-left: 1%;
padding-right: 1%;
cursor: pointer;
}
.button_desktop_02 {
float: left;
position: relative;
padding-left: 1%;
padding-right: 1%;
cursor: pointer;
}
.FadeItem_01 {
display: none
}
.FadeItem_01 .FadeItem_01 {
position: absolute;
left: 100%;
top: 0;
width: 130px;
height: 100%;
}
.FadeItem_02 {
display: none
}
.FadeItem_02 {
position: absolute;
left: 100px;
top: 0;
width: 130px;
height: 100%;
}
ul {
margin: 0;
list-style: none;
padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation_desktop">
<div class="button_desktop_01">1.0 Main Menu
<div class="FadeItem_01">
<ul>
<li>1.1 Sub Menu </li>
<li class="button_desktop_02">1.2 Sub Menu
<div class="FadeItem_02">
<ul>
<li>1.2.1 Sub Menu</li>
<li>1.2.2 Sub Menu</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
<div class="button_desktop_01">2.0 Main Menu
<div class="FadeItem_01">
<ul>
<li class="button_desktop_02">2.1 Sub Menu
<div class="FadeItem_02">
<ul>
<li>2.1.1 Sub Menu</li>
<li>2.1.2 Sub Menu</li>
<li>2.1.3 Sub Menu</li>
</ul>
</div>
</li>
<li>2.2 Sub Menu </li>
</ul>
</div>
</div>
<div class="button_desktop_01">3.0 Main Menu
</div>
</div>
关于jquery - 具有不同设计的多个淡入/淡出子菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45647480/