懸停或點擊jquery下拉菜單

Question

我有一個菜單，看起來像下面的一個。我希望一級孩子在懸停或點擊時出現（所以它也適用於iPad）。當懸停（或點擊）第一級孩子時，我想要它的二級孩子出現，如果他們存在。在懸停或單擊不同的DOM元素時，應該再次隱藏所有子菜單。

另外，當用戶在頁面上時，我想要菜單摺疊出來，直到他將鼠標懸停在另一個菜單項上或點擊不同的菜單項，以便他總能看到他在導航中的位置。

我在Wordpress中構建了一個朋友，他應該能夠使用後端創建和更改其導航菜單。因此，將某些類或ID添加到某些元素不是一種選擇。

<style> 
.sub-menu {display: none;} 
</style> 


<ul class="menu"> 
    <li>child 1 
    <ul class="sub-menu"> 
     <li>child 1.1 
     <ul class="sub-menu"> 
      <li>child 1.1.1</li> 
      <li>child 1.1.2</li> 
     </ul> 
     </li> 
     <li>child 1.2 
     <ul class="sub-menu"> 
      <li>child 1.2.1</li> 
      <li>child 1.2.2</li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
    <li>child 2 
    <ul class="sub-menu"> 
     <li>child 2.1</li> 
     <li>child 2.2</li> 
    </ul> 
    </li> 
</ul> 

這就是我想出來的，但它不起作用。當鼠標懸停在1.1和1.2的兄弟姐妹上時，

$("ul.menu li").hover(function() { 
    $(this).find("ul.sub-menu").not("ul.sub-menu li ul.sub-menu").slideDown(); 
} , function() { 
    $(this).find("ul.sub-menu").hide(); 
}); 

$("ul.menu li ul.sub-menu").hover(function() { 
    $(this).find("ul.sub-menu").slideDown(); 
} , function() { 
    $(this).find("ul.sub-menu").hide(); 
}); 

Answer 1

通過直接針對ul

解決方案請嘗試以下解決方案的一個：

---

// previous (following) is very inefficient and slow: 
// -- $(this).find("ul.sub-menu").not("ul.sub-menu li ul.sub-menu").slideDown(); 
// Rather, target the exact ULs which are Direct Children 

$("ul.menu").find('li').hover(
    function() { 
     $(this).find('> ul').slideDown(); 
    }, 
    function() { 
     $(this).find('> ul').slideUp(); 
     // If something Slides Down, it should slide up as well, 
     // instead of plain hide(), your choice - :) 
    } 
); 

解決方案B：

---

更多精密在兩個上行線路

更新：溶液A工作得很好，使乙冗餘

$("ul.menu").find('> li').hover(
    function() { 
     $(this).find('> ul').slideDown(); 
    }, 
    function() { 
     $(this).find('> ul').hide(); 
    } 
); 

$("ul.sub-menu").find('> li').hover(
    function() { 
     $(this).find('> ul').slideDown(); 
    }, 
    function() { 
     $(this).find('> ul').hide(); 
    } 
); 

檢查Fiddle

Answer 2

這是未經測試..你必須擴大一點。

$('ul.menu li').siblings('ul:first-child').on('click', function() { 
if($(this).is(':visible')) { 
    $(this).hide(); 
} 
else { 
    $(this).show(); 
} 
}) 

$('ul.menu li').siblings('ul:first-child').hover(
function() { 
    $(this).show(); 
}, 
function() { 
    $(this).hide(); 
} 
) 

編輯：正如我看到你的結構不一致。有時候，你放置一個列表在鋰元素，有時它被作爲一個兄弟......