具有不同设计的多个淡入/淡出子菜单

Question

请在这里找到我的详细代码：https://jsfiddle.net/d8rduvjc/1/

我想用jQuery创建一个导航;因此，我使用FadeIn和FadeOut命令。为此，我分配了一个<div>作为淡入淡出项目。

由于会有一些子菜单，我将在导航菜单中有多个淡入淡出项目。并非所有产品都具有完全相同的设计，因为其中一些会在按钮下方淡入/淡出，而另一些会在按钮旁边淡入/淡出。

因此，我试图将淡入淡出项目分为FadeItem_01和FadeItem_02。但是，现在我遇到了一个问题，即FadeItem_02不再出现在按钮旁边。相反，它显示在按钮下方。

我必须在代码中更改什么，以便FadeItem_01显示在按钮下方，FadeItem_02显示在按钮旁边？

Answer 1

请检查您想要的，

$(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>