複雜的嵌套式UL導航

我試圖將三級UL變成易於使用的導航系統。複雜的嵌套式UL導航

我的想法是擁有第一個UL，它是LI的展示，但隱藏了UL UL和UL UL UL以及它們各自的LI。

我希望有人能夠點擊LI的頂部，然後在該LI內顯示UL。

然後，這個想法是，父母UL隱藏，以及它的LI，但不是我剛剛選擇的子UL。

如果接着點擊另一個LI，它會顯示LI的孩子UL和它的相應LI。

效果只會在任何時候顯示一個UL。

我明白這是複雜的，我無法理解這將如何完成 - 我猜CSS和jQuery的組合，我嘗試了各種各樣的東西，並搜索了很多地獄，因此我正在訴諸這個。

如果有人對我正在談論的事情以及如何實施這個想法有任何意見，那將是很棒的事情，因爲我在哪裏開始的時候有點失落。

編輯

我西港島線固定寬度專區內有UL，所以我可以使用溢出：隱藏和負值上未使用的UL的做「假隱藏」。

來源

2012-10-31 tjcss

一個'ul/li'結構不能用於這個佈局，因爲你將無法顯示一個子元素'ul'，因爲它的父元素是隱藏的。 –

是的，真的！我應該補充的是，這將是一個固定大小的div，並且過流隱藏，所以我們可以對未使用的UL進行負面定位，使其看起來像是隱藏的。 – tjcss

下面是我在JSFiddle中完成的一個小模型，您只需要尋找一些非正統的解決方法來實現這一點。

是的，你需要一些jQuery來做到這一點，我懸停使得它只是爲例子，你可以使用你所需要的活動，這僅僅是校長：

$('.subdropdown').hover(
    function() { $(this).parent().parent().css({'visibility': 'hidden'}); 
    $(this).css({'visibility': 'visible'});}, 
    function() { $(this).parent().parent().css({'visibility': 'visible'});} 
);

希望這幫助。

來源

2012-10-31 10:54:12

複雜的嵌套式UL導航

回答

相關問題