多淡入/輸出子菜單有不同的設計

Question

請在這裏找到我的詳細代碼：https://jsfiddle.net/d8rduvjc/1/

我想創建一個使用jQuery導航;因此，我使用FadeIn和FadeOut命令。爲此我分配了<div>作爲FadeItem。

由於會有一些子菜單，我會在導航菜單中有多個FadeItems。並不是所有的人都會有相同的設計，因爲他們中的一些會淡入/輸出下面按鈕，而其他一度將淡入/輸出旁邊的按鈕。

因此，我試圖FadeItems分成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"> 
 

 
\t <div class="button_desktop_01">1.0 Main Menu 
 
\t \t <div class="FadeItem_01"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li>1.1 Sub Menu </li> 
 
\t \t \t \t <li class="button_desktop_02">1.2 Sub Menu 
 
\t \t \t \t \t <div class="FadeItem_02"> 
 
\t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t <li>1.2.1 Sub Menu</li> 
 
\t \t \t \t \t \t \t <li>1.2.2 Sub Menu</li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <div class="button_desktop_01">2.0 Main Menu 
 
\t \t <div class="FadeItem_01"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li class="button_desktop_02">2.1 Sub Menu 
 
\t \t \t \t \t <div class="FadeItem_02"> 
 
\t \t \t \t \t \t <ul> 
 
\t \t \t \t \t \t \t <li>2.1.1 Sub Menu</li> 
 
\t \t \t \t \t \t \t <li>2.1.2 Sub Menu</li> 
 
\t \t \t \t \t \t \t <li>2.1.3 Sub Menu</li> 
 
\t \t \t \t \t \t </ul> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </li> 
 
\t \t \t \t <li>2.2 Sub Menu </li> 
 
\t \t \t </ul> 
 
\t \t </div> 
 
\t </div> \t 
 
\t 
 
\t <div class="button_desktop_01">3.0 Main Menu 
 
\t </div> 
 
\t 
 
</div>