html - 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 更改为:focus 时，单击第二级nav-bar 时一切都会关闭。我真的不是一个熟练的 html/css 编码器，所以我不太确定它是如何工作的。我假设 dropdown 是 ul 类的名称和 div 的 dropdown-menu 这个菜单位于，但是我不确定，因为所有的代码都是生成的……另外，我很抱歉我的英语不太好。谢谢。

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>