Question

如果我点击导航a href li想要显示最近的更深层子类别（ul和li）。想用css做所有事情（不想使用jquery）。

使用此处的示例http://bonrouge.com/br.php?page=cssonclickswitch

在示例中，如果单击链接，则显示特定图像。

修改了示例（此处为实例http://jsfiddle.net/w83ob3Lh/5/）

<ul id="cssonclickswitch" class="">

<li><a href="#n">Wine
<span><img  alt="wine" height="50" width="50"></span></a>
  <ul class="">
  <li><a href="#">Option One 1-1</a> </li>
  <li><a href="#">Option One 1-2</a> </li>
  </ul> 
</li>

</ul>

和css这个

#cssonclickswitch a span, #cssonclickswitch ul li {display: none;}

#cssonclickswitch a:active span, 
#cssonclickswitch a:focus span, 
#cssonclickswitch :active ul li, 
#cssonclickswitch :focus ul li 
{
display: block;
/*position: absolute;*/
position: relative;
top: 0;
left: 0px;
width: 50px;
color:red;
background:#fff;
}

所以页面加载#cssonclickswitch ul li {display: none;}这没关系。

如果点击链接并按住鼠标按钮，请参阅＆＃34;子类别＆＃34;

Option One 1-1
Option One 1-2

问题是。如果释放鼠标按钮，那么我可以看到图像（没关系），但子类别消失（不行）。

如果释放鼠标按钮（点击链接后）如何保留/显示子类别？

Answer 1

添加#cssonclickswitch a:focus ~ ul li 更新了你的小提琴：

http://jsfiddle.net/w83ob3Lh/6/

仅限css。点击li，显示嵌套的ul和li。释放鼠标按钮，必须继续显示嵌套的ul和li

1 个答案: