javascript - Pinterest 下拉菜单的工作原理是什么？

Question

我知道有很多简单的方法可以使用各种 jquery 或其他类似包来创建自定义 DropDown 菜单。抛开所有这些……我更好奇 Pinterest 的人们是如何设法创建一个非常敏感的菜单，其中深度没有改变……并且 css 属性没有改变(是的……dropmenu 容器显示 css“显示:none"即使它是可见的!!!)

到目前为止，我已经发现所有显示元素都是硬编码的，并且下拉 block 隐藏在规则的基础 css 中:.HeaderContainer li ul { ... ;显示:无； ...

令我感到困惑的是，即使菜单可见，这个属性也永远不会改变。我本来希望有一些 javascript 函数向该元素添加样式属性以取消显示:无；

任何人都可以向我解释 Pinterest 是如何做到这一点的吗？这是他们的导航 HTML

<ul id="Navigation">
    <li><a onclick="Modal.show('Add'); return false" class="nav" href="#">Add<span class="PlusIcon"></span></a></li>

    <li>
      <a class="nav" href="/about/">About<span></span></a>
      <ul>
        <li><a href="/about/help/">Help</a></li>
        <li><a href="/about/goodies/">Pin It Button</a></li>
        <li class="beforeDivider"><a href="/about/copyright/">Copyright</a></li>
        <li class="divider"><a href="/about/careers/">Careers</a></li>
        <li><a href="/about/team/">Team</a></li>
        <li><a href="http://blog.pinterest.com/">Blog</a></li>
     </ul>
    </li>

    <li id="UserNav">
      <a class="nav" href="/guacamoly/"><img alt="img" src="http://media-cdn.pinterest.com/avatars/guacamoly-72.jpg">Amol<span></span></a>
      <ul>
        <li><a href="/invites/">Invite Friends</a></li>
        <li class="beforeDivider"><a href="/invites/facebook/">Find Friends</a></li>
        <li class="divider"><a href="/guacamoly/">Boards</a></li>
        <li><a href="/guacamoly/pins/">Pins</a></li>
        <li><a href="/guacamoly/pins/?filter=likes">Likes</a></li>
        <li class="divider"><a href="/settings/">Settings</a></li>
        <li><a href="/logout/">Logout</a></li>
       </ul>
    </li>
</ul>

Answer 1

这是一个基本的 CSS 下拉菜单。

当鼠标经过父菜单项时，内部元素的显示属性切换为“not none”( block 、内联或内联 block 或其他)。

更准确地说，此规则适用 (pinboard_38edcc4c.css:379):

.HeaderContainer li:hover ul {
  display: block;
}

我认为您看到了 display:none 属性，因为只要菜单不再下拉，您就会检查元素。大多数调试器不会在将元素悬停在页面中时刷新“CSS 规则” View 。在 :hover 时查看 CSS 规则对于调试器来说总是很棘手。

我建议您用谷歌搜索“CSS 下拉菜单操作方法”并试一试。