jquery - 单击打开的 CSS 下拉导航

Question

我制作了一个 CSS 下拉菜单。但问题是当我将鼠标悬停在菜单上时，我的下拉菜单出现了。但我希望在用户单击菜单时打开下拉菜单。我不能为相同的 jQuery 代码构建框架。请帮助我。任何帮助将不胜感激。提前致谢。

Answer 1

你可以结合 :active 和 :hover 伪选择器在纯 css 中实现这一点，

HTML(注意选项卡名称在内容下方):

<div class="tabs">
  <div class="content">Content 1</div>
  <div>Tab 1</div>
</div>
<div class="tabs">
  <div class="content">Content 2</div>
  <div>Tab 2</div>
</div>

CSS:

.tabs {
  float: left; /* place tabs in one line */
  margin: 10px; /* set margin between tabs */
}
.content {
  display: none; /* hide contents */
  padding-top: 20px; /* content must be below tab */
  position: absolute; /* fix content position */
}
.tabs:active .content {
  display: block; /* open content when clicking*/
}
.content:hover {
  display: block; /* not closing content while cursor is over it */
}

检查示例:http://jsfiddle.net/vladkras/JJj3G/