html - 两个具有相同 css 的菜单，但只有一个在触摸设备上工作

Question

在我的网站(链接:https://damaristhalmann.ch/)上有两个吸尘器下拉菜单(“菜单(照片)”+“联系人”)，吸尘器打开时。在触摸屏设备上，“联系人”下拉菜单有效，但下拉菜单“菜单(照片)”无效。

据我了解，CSS 结构相同但结果不同。 HTML 标记有一些细微差别，但由于菜单 (fotografie) 是 WordPress 生成的菜单，我不想更改它。

你能帮我分析一下这个 hoover 下拉“菜单(照片)”在触摸设备上不起作用的问题吗？

感谢您的帮助!

最美好的祝愿 大号

Answer 1

它不适用于 Fotografie，因为您没有任何元素正在保存下拉列表状态(无论是否显示)。 然而，在 Kontackt 链接中，有一个复选框类型的隐藏输入，它管理 li 元素的状态。

你想对所有下拉标题都有这样的东西:

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

ul {
  list-style: none;
}

.nav {
  padding: 1em;
  width: 20vw;
  height: 100vh;
  background: -webkit-gradient(linear, left top, right bottom, from(lightblue), to(lightgreen));
  background: linear-gradient(to bottom right, lightblue, lightgreen);
}

.nav .main_item {
  position: relative;
}

.nav .main_item h3 {
  cursor: pointer;
}

.nav .main_item h3::after {
  content: "\25B8";
}

.nav .main_item .flow-control:checked + h3::after {
  content: "\25BE";
}

.nav .main_item .flow-control {
  opacity: 0;
  position: absolute;
  top: 6px;
  width: 100%;
  cursor: pointer;
}

.nav .main_item .flow-control:checked ~ ul {
  display: block;
}

.nav .main_item ul {
  margin-bottom: 1em;
  display: none;
}

  <ul class="nav">
        <li class="main_item">
            <input type="checkbox" class="flow-control">
            <h3>Header 1</h3>
            <ul>
                <li class="sub_item">Sub-item 1</li>
                <li class="sub_item">Sub-item 2</li>
                <li class="sub_item">Sub-item 3</li>
            </ul>
        </li>

        <li class="main_item">
            <input type="checkbox" class="flow-control">
            <h3>Header 2</h3>
            <ul>
                    <li class="sub_item">Sub-item 1</li>
                    <li class="sub_item">Sub-item 2</li>
                    <li class="sub_item">Sub-item 3</li>
            </ul>
        </li>
        
        <li class="main_item">
            <input type="checkbox" class="flow-control">
            <h3>Header 3</h3>
            <ul>
                    <li class="sub_item">Sub-item 1</li>
                    <li class="sub_item">Sub-item 2</li>
                    <li class="sub_item">Sub-item 3</li>
            </ul>
        </li>
    </ul>

每个标题都有其独特的复选框，用于管理 ul 状态。