Question

我的菜单结构如下：

<div class="nav">
    <div class="drnav">
        <ul class="ulMenu">
            <li>
                <div class="menuHeader">My Home</div>
                <div class="menu-content">
                    <ul>
                        <li><a href="">item1</a></li>
                        <li><a href="">item3</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <div class="menuHeader">My Stuff</div>
                <div class="menu-content">
                    <ul>
                        <li><a href="">item4</a></li>
                        <li><a href="">item6</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

我的css已设置好，当您将鼠标悬停在menuHeader元素上时，将显示menu-content元素（即display：inline）。这一切都很好，但我想要的是当你点击菜单内容列表项元素中的一个链接时，菜单（即父菜单内容元素）消失。当然我想在没有任何JavaScript的情况下这样做。我看到一个使用指针事件但是限制使用IE 11的例子，我想支持至少IE 10，如果不是9。关于如何使其发挥作用的任何建议？

Answer 1

从技术上来说，这是可能的，但它无关紧要（在实践中很难使用它）：

.ulMenu .menu-content {
  display: none;
}
.ulMenu > li:hover .menu-content {
  display: inline-block;
}
.ulMenu > li .menu-content:target {
  display: none;
}

<div class="nav">
    <div class="drnav">
        <ul class="ulMenu">
            <li>
                <div class="menuHeader">My Home</div>
                <div class="menu-content" id="menuContent_1">
                    <ul>
                        <li><a href="#menuContent_1">item1</a></li>
                        <li><a href="#menuContent_1">item3</a></li>
                    </ul>
                </div>
            </li>
            <li>
                <div class="menuHeader">My Stuff</div>
                <div class="menu-content" id="menuContent_2">
                    <ul>
                        <li><a href="#menuContent_2">item4</a></li>
                        <li><a href="#menuContent_2">item5</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

此外，关闭菜单后，重新打开菜单的唯一方法是打开另一个菜单并将鼠标悬停在初始菜单上。

重要提示：

我想指出，与基于:hover的菜单相比，基于JavaScript的菜单是一个巨大的劣势。因为当今流量的一半以上来自触摸设备（并且您不会在触摸设备上悬停太多，不是吗？），而只有1%的流量被禁用JavaScript。

那么，你能解释一下为什么要求一个纯CSS解决方案吗？我在过去8年中对纯CSS的唯一实际用途是支付网关页面，其中JavaScript严格禁用。但是，除此之外？

我碰巧了解CSS的方式，但我从未热衷于尝试将DOM操作转移到CSS，而不是将它们留给JavaScript。毕竟，这就是JavaScript的用途。使用正确的工具完成工作。这里的工作是DOM操作。所以使用JavaScript。

以下是我在评论中描述的input / label解决方案。我意识到它们不一定是复选框，我可以使用:focus状态来隐藏菜单内容。它仍然是错误的，因为需要在页面中的任何位置单击以使:hover再次为最近关闭的菜单工作。但它只能与CSS最接近，或者至少，这就是我的想法。

.menuHeader input:focus + label,
.menuHeader label {
  display: none;
}
.menuHeader:hover label
{
  display: inline-block;
}
input.hidden {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

<ul class="ulMenu">
  <li>
    <div class="menuHeader">
      <div>My Home</div>
      <input id="menuContent_1" class="hidden" type="text" />
      <label class="menu-content" for="menuContent_1">
        <ul>
          <li><a href="#menuContent_1">item1</a></li>
          <li><a href="#menuContent_1">item2</a></li>
        </ul>
      </label>
    </div>
  </li>
  <li>
    <div class="menuHeader">
      <div>My Stuff</div>
      <input id="menuContent_2" class="hidden" type="text" />
      <label class="menu-content" for="menuContent_2">
        <ul>
          <li><a href="#menuContent_2">item4</a></li>
          <li><a href="#menuContent_2">item5</a></li>
        </ul>
      </label>
    </div>
  </li>
</ul>

Answer 2

为了清晰起见，更改HTML标记不是为了语义。如果每个其他级别由<dl>，<dt>，<dd>列表元素表示，我发现嵌套列表更容易可视化。
使用隐藏的无线电输入，因为它是维持“状态”的最简单方法。（例如，＆＃39; on＆＃39; off＆＃39; off＆＃39;）无限期地仅使用CSS。
定位元素是通过配对<label>和<input type="radio"> s组完成的。
使用visibility属性，因为如果所述孩子明确设置visibility: hidden，则可以保持visibility: visible元素的子元素可见。

我不确定删除菜单的父级是什么用途，并且不确定OP是否需要父母回来。因此，当点击菜单项时标题并没有真正消失，它们只是不可见。如果你想要它们，只需点击列表上方的空格即可。

<强>段

＆＃13;

body {
  background: #222;
}
li {
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
  padding: 3px;
  margin-bottom: 12px;
}
.rad {
  display: none;
}
.rad + label,
dd {
  visibility: hidden;
}
dl:hover dd,
.rad:checked + label {
  cursor: pointer;
  visibility: visible;
  color: #fc2;
}
dd label:hover {
  background: #930;
  border: .5px solid cyan;
}

＆＃13;

<nav class="mainNav">
  <div class="drNav">
    <ul class="mainMenu">
      <li>
        <dl class="menuContent">
          <input id='rad0' class='rad' name='radA' type='radio' checked>
          <label for='rad0'>
            <dt class="menuHeader">HOME___</dt>
          </label>
          <dd>
            <label for='rad1'>
              <input id='rad1' class='rad' name='radA' type='radio'>Item1
            </label>

          </dd>
          <dd>
            <label for='rad2'>
              <input id='rad2' class='rad' name='radA' type='radio'>Item2
            </label>

          </dd>
        </dl>
      </li>
      <li>
        <dl class="menuContent">
          <input id='rad3' class='rad' name='radB' type='radio' checked>
          <label for='rad3'>
            <dt class="menuHeader">CONTENT</dt>
          </label>
          <dd>
            <label for='rad4'>
              <input id='rad4' class='rad' name='radB' type='radio'>Item3
            </label>

          </dd>
          <dd>
            <label for='rad5'>
              <input id='rad5' class='rad' name='radB' type='radio'>Item4
            </label>

          </dd>
        </dl>
      </li>
    </ul>
  </div>
</nav>

＆＃13;

只有CSS菜单，点击消失

2 个答案: