CSS下拉菜單 - 兒童li項目關閉點擊 - jQuery

尋找一個簡單的jQuery的幫助來關閉點擊上的ul ul li項目。這裏是我的小提琴手..CSS下拉菜單 - 兒童li項目關閉點擊 - jQuery

<div id='flyout_menu'> 
<ul> 
    <li onClick=」return true」><a href='#'><span>title</span></a> 
     <ul> 
       <li><a href='#'><span> sub title </span></a></li> 

     <li><a href='#'><span> sub title </span></a></li> 

<li><a href='#'><span>sub title</span></a></li> 


    </ul></li> 
</ul> 
</div>

來源

2014-09-11 user3682234

感謝您的輸入，是不爲我的請求，明確遺憾。你的解決方案奏效如果我希望父UI在單擊時保持活動狀態，還有一件事？謝謝！ – user3682234 2014-09-11 14:10:29

我沒有很好地理解你想要什麼，但這裏是我的理解。

DEMO：http://jsfiddle.net/don/ux3vx1Lz/5/

當您點擊UL UL李，在UL UL是封閉的，是什麼？

樣品的jQuery：

$('ul ul li').on('click', function() { 
    $(this).parent().hide(); 
}); 

$('ul li').on('mouseover', function() { 
    $(this).find('ul').show(); 
});

來源

2014-09-11 07:25:58

...以及用戶將如何再次打開菜單？ – 2014-09-11 07:32:24

更新了代碼（和演示）並添加了支持以在菜單懸停時再次顯示。 – 2014-09-11 07:49:01

，因爲你的菜單是一個CSS只菜單中，我們將繼續保持這種方式。使用：主動選擇器。只是改變你的提琴如下：

#flyout_menu ul ul, 
#flyout_menu ul:active{ //<-- this one is the new row, to hide the clicked ul 
    visibility: hidden; 
    position: absolute; 
    top: 0; 
    left: 80%; 
    z-index: 584598; 
}

這有一些缺點，但 - 這也觸發，如果你點擊主標題，導致主標題的閃爍......

我」 d建議用js完全重建顯示和隱藏功能，並僅使用css進行造型/定位。我也建議你在菜單的每個級別使用類名和id，因爲你可以用這種方式更簡單地解決單個元素。尋找.subItem總是比#menu ul ul li更好！

來源

2014-09-11 07:34:06 errand

不錯的建議我會用類名重建ul subnav .. – user3682234 2014-09-11 14:10:50

JS：

$('ul ul li a').on('click', function() { 
    $(this).closest("ul").addClass("hidden"); 
}); 
$('ul li').on('mouseover', function() { 
    $(this).find('ul').removeClass("hidden"); 
});

CSS：

.hidden{ 
    display:none; 
}

Updated Fiddle

來源

2014-09-11 08:10:36

CSS下拉菜單 - 兒童li項目關閉點擊 - jQuery

回答

相關問題