Показать/скрыть вложенный список с помощью css

Question

Есть ли способ показать и скрыть onclick вложенный список в вертикальной навигационной панели с CSS? если бы не лучший способ сделать это?

Answer 1

Как вы хотите скрыть это? Лучше всего использовать простую CSS

ul li ul { 
    display: none; 
} 

ul li:hover ul { 
    display: block; 
} 

Вы можете, очевидно, добавить некоторые линейные переходы и/или Fade плюсов, используя либо CSS или JQuery, чтобы избежать визуальных прыжков.

EDIT

Для OnClick, использовать JQuery.

$(".mySelector").click(function() { 
    $(this).find("li").find("ul").show(); 
}); 

Вы можете заменить шоу() с FadeIn, а также, и я предполагаю, что по умолчанию display: none там уже.

Кроме того, вы можете использовать bind, если эти элементы генерируются динамически.

Answer 2

Предполагаете, вы хотите отобразить список вложенных onclick?

Я бы предложил пойти с JQuery (JavasScript) и сделать что-то вроде этого

$('ul.outerlist>li').on(`click`, function(){ 
    $(this).find('ul.innerlist').toggle(); 
}); 

EDIT: это самый простой способ, я могу себе представить. Все остальное зависит от того, чего именно вы пытаетесь достичь.

Answer 3

Вы можете использовать

ul#childlist 
{ 
    display:none; 
} 

    ul#parentlist li:hover ul#childlist 
    { 
     display: block; 
    } 

Вы, возможно, придется увеличить границ или поля, чтобы заставить его работать душить. Вы также можете посмотреть CSS-переходы, они отлично подходят для просмотра JavaScript-кода без использования JavaScript.

Надеюсь, это поможет.

Answer 4

Вы можете добиться этого, используя jquery (javascript framework).

Если ищете боковой панели, то эта ссылка поможет:

http://www.htmldrive.net/items/show/143/jQuery-Advanced-docking-Side-Menu

Если loking для вертикального типа меню что-то, то это:

http://www.designchemical.com/lab/jquery-vertical-mega-menu-plugin/examples/