CSS基础测试10 - 下拉导航

题目： css10

回答：

// 我的回答 7分
* { padding: 0; margin: 0; }
ul,li { list-style: none; }
.menu-list { width: 160px; height: 90vh; border: 1px solid #ccc; border-top: none; border-bottom: none; padding: 20px 0; }
.menu-sub { display: none;  transition: .2s;}
.menu-item-icon { display: inline-block; transform: rotate(90deg); transition: .2s; }
.menu-item { display: flex; justify-content: space-between; padding: 0 10px; line-height: 40px; }
.menu-group input { position: absolute; display: block; width: 100%; height: 40px; top: 0; opacity: 0; z-index: 0;}
.menu-group {position: relative; }
.menu-group input:checked+.menu-item .menu-item-icon{ transform: rotate(270deg); }
.menu-group input:checked+.menu-item+.menu-sub { display: block; }
.menu-sub-item {line-height: 40px; padding-left: 30px; font-size: 14px; cursor:default; }
.menu-sub-item:hover { background: #EDF9FF; color: #33b2ee; }

<div class="menu-list">
  <div class="menu-group">
    <input type="checkbox">
    <div class="menu-item">
      <b>布局</b>
      <span class="menu-item-icon">></span>
    </div>
    <ul class="menu-sub">
      <li class="menu-sub-item">Flex布局</li>
      <li class="menu-sub-item">Grid布局</li>
      <li class="menu-sub-item">Shapes布局</li>
      <li class="menu-sub-item">Columns布局</li>
    </ul>
  </div>
  <div class="menu-group">
    <input type="checkbox">
    <div class="menu-item">
      <b>组件</b>
      <span class="menu-item-icon">></span>
    </div>
    <ul class="menu-sub">
      <li class="menu-sub-item">按钮</li>
      <li class="menu-sub-item">输入框</li>
      <li class="menu-sub-item">下拉列表</li>
      <li class="menu-sub-item">单复选框</li>
    </ul>
  </div>
</div>

满分回答 总结：

注意语义化；
h5新增标签不熟悉也不常去用，越不用越不熟；
小图标偷了懒没有做，直接用的标点符号；

> 在线demo <

zxx: 本期要点

视觉还原才是重点。

details > summary 是最好的实现。可以进一步注意语义化。这个方法IE/Edge是不支持。所以可以用来判断是否是IE内核浏览器，var isIE = !('open' in document.createElement('details'))。所以如果要兼容IE，可以写个polyfill。

:checked方法交互也可以实现，但语义欠佳，不是这种交互的最佳实践。注意优化选择器。

:target方法有触发锚点定位的问题，可以使用一个隐藏的空div元素曲线救国。

:focus-within只要子元素有focus，就能匹配。是目前最先支持的具有“父选择器”特性的伪类。最佳时间是下拉菜单。类似的选择器还有 :target-within。

/ 元素聚焦，同时聚焦轮廓浏览器认为应该显示。 /:focus:not(:focus-visible) { outline: 0; }

注意不要过度无障碍设置

JaimeCheng / zxx-quiz-summary

CSS基础测试10 - 下拉导航 #6