两个具有相同 css 的菜单，但只有一个在触摸设备上可用

Question

在我的网站 (Link: https://damaristhalmann.ch/) 上有两个 hoover 下拉菜单 ("menu (fotografie)" + "contact") 在 hoover 时打开。在触摸屏设备上，"contact"-下拉菜单正常工作，但下拉菜单 "menu (fotografie)".

无效

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

你能帮我分析一下这个 hoover 下拉菜单的问题 "menu (fotografie)"，它在触摸设备上不起作用吗？

感谢您的帮助！

祝福大号

Answer 1

在您的模板中使用 2 个不同的 html 作为 links。

对于Fotografie link:

<a href="https://damaristhalmann.ch" aria-current="page">Fotografie</a>

对于Kontakt link:

<div class="kontaktfeld-mobile">
        <input type="checkbox" id="menu">
        <label for="menu"><a>Kontakt</a></label>
            <div class="kontaktfeld-mobile-inhalt">                             
                <li><a href="mailto:hallo@damaristhalmann.ch">E-mail</a></li>
                <li><a href="tel:+41 79 265 01 45">+41 79 265 01 45</a></li>
                <li><a href="https://goo.gl/maps/VMcUYpqRFetqB32G6"target="_blank"> Margarethenstrasse 99</a></li>
                <li><a class="nounderline">CH-4053 Basel </a> </li>
                <li><a href="https://www.instagram.com/damaris_thalmann/" target="_blank">Instagram</a></li>
           </div>       
    </div>

class kontaktfeld-mobile 响应移动下拉菜单的代码块。以防 Fotografie 丢失。

Answer 2

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

您想对所有下拉列表 header 设置这样的内容：

* {
  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: "B8";
}

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

.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>

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

两个具有相同 css 的菜单，但只有一个在触摸设备上可用

Two menus with same css but only one is working on touch device

html

css

wordpress

touch