Orchard многоуровневое выпадающее меню при нажатии только

Question

Я работаю с Orchard на тему, основанной на Bootstrap. CSS-код навигации меню выглядит так и отлично работает при наведении курсора на меню второго уровня.

.dropdown-menu .dropdown-menu { 
    left: 100% !important; 
    top: 0; 
} 

.dropdown .dropdown:hover > .dropdown-menu, 
.dropdown .dropdown .dropdown:hover > .dropdown-menu, 
.dropdown .dropdown .dropdown .dropdown:hover > .dropdown-menu { 
    display: block; 
} 

.dropdown-menu i { 
    line-height: 1.42857143; 
} 

Теперь я хотел бы для всех уровней этого выпадающего меню, чтобы открыть только по щелчку, потому что это не работает на сенсорных устройствах. Когда я меняю ': hover's to: focus, все закрывается, когда нажимается второй уровень nav-bar. Я действительно не квалифицированный кодировщик html/css, поэтому я не уверен, как это работает. Я предполагаю, что dropdown - это имя класса ul и dropdown-menudiv Это меню находится в, но я не уверен, так как весь код сгенерирован ... Кроме того, мне жаль, что у меня не так замечательно на английском языке. Спасибо.

Answer 1

Как вы можете видеть в этом примере: http://codepen.io/HerrSerker/details/wMdgER/ :focus не работает, потому что вы не можете пузырек с CSS3-, как вы можете сделать с :hover и вы можете иметь только один элемент с :focus. Таким образом, у вас нет памяти :focus

Душа заключается в том, чтобы создать обходное решение с чем-то, что имеет память. Вы должны использовать переключатели с помощью переключателя :checked и смежного комбинатора (A + B).

Смотрите здесь: http://codepen.io/HerrSerker/pen/obWBVG

Затем вы должны скрывать кнопки радио и пусть лейблы делают работу

nav ul label { 
 
    display: block; 
 
} 
 
nav ul > li > label > input:checked + ul { 
 
    display: block; 
 
} 
 
nav ul.lvl-2 { 
 
    display: none; 
 
}

<nav> 
 
    <ul class="lvl-1"> 
 
    <li> 
 
     <label for="id-lvl1-01"> 
 
     <input type="radio" name="lvl-1" id="id-lvl1-01" />1 
 
     <ul class="lvl-2"> 
 
      <li> 
 
      <label for="id-lvl2-01-01"> 
 
       <input type="radio" name="lvl-1-1" id="id-lvl2-01-01" />01</label> 
 
      </li> 
 
      <li> 
 
      <label for="id-lvl2-01-02"> 
 
       <input type="radio" name="lvl-1-1" id="id-lvl2-01-02" />02</label> 
 
      </li> 
 
     </ul> 
 
     </label> 
 
    </li> 
 
    <li> 
 
     <label for="id-lvl1-02"> 
 
     <input type="radio" name="lvl-1" id="id-lvl1-02" />2 
 
     <ul class="lvl-2"> 
 
      <li> 
 
      <label for="id-lvl2-02-01"> 
 
       <input type="radio" name="lvl-1-2" id="id-lvl2-02-01" />01</label> 
 
      </li> 
 
      <li> 
 
      <label for="id-lvl2-02-02"> 
 
       <input type="radio" name="lvl-1-2" id="id-lvl2-02-02" />02</label> 
 
      </li> 
 
     </ul> 
 
     </label> 
 
    </li> 
 
    </ul> 
 
</nav>