CSS

Question

我想请你帮忙。好吧，我必须创建一个非常简单的导航，但我遇到了一个问题，因为我无法重写此代码以使导航在没有复选框的情况下工作，这非常重要 - 它不应该基于复选框。

好的，首先是基于复选框的版本：http://codepen.io/anon/pen/dPaeZE

如您所见，当用户单击 TEST1 或 TEST2 时，它会展开列表。

我想做一些类似的东西，但没有我之前提到的复选框，所以这是我的第二个代码笔：http://codepen.io/anon/pen/azXGEQ

我试过这段代码：

.menu {
  display: none;
 }

/* show menu */
.nav-header:focus + .menu{
  display: block;
}

但它不起作用，当我点击 TEST1 或 TEST2 时，ul 不显示。这里有些不对劲，但我不知道到底是什么。 :P

好了，就这些了，希望大家能帮我看看。

Answer 1

基本上一个span收不到focus.

最佳解决方案是使用可以接收 focus 的元素，例如锚点 link 或者，更喜欢实际的按钮。

为方便起见，我在这里使用了 link，但最好使用按钮，因为 Links are not buttons

/* basic style */

body {
  margin-top: 30px;
}
a {
  color: #EF9000;
  text-decoration: none;
}
.container {
  width: 230px;
  margin: 0 auto;
}
/* nav */

.nav,
.menu {
  padding: 0px;
  margin: 0px;
  text-align: center;
  text-transform: uppercase;
  list-style: none;
}
.menu li {
  list-style: none;
  display: list-item;
  padding: 2px 0;
}
.menu li a {
  display: block;
  padding: 2px 0;
  transition: all 0.2s ease-in-out;
}
.menu li a:hover {
  background-color: #EF9000;
  color: #F1F1F1;
}
/* 
* Hide/show nav
*/

.nav-header {
  cursor: pointer;
}
.menu {
  display: none;
}
/* show menu */

.nav-header:focus + .menu {
  display: block;
}

<div class="container">

  <h1>Collpase menu NO checkbox</h1>

  <ul class="nav">

    <li>
      <a href="#" class="nav-header">Test 1</a>
      <ul class="menu">
        <li><a href="#">Something</a>
        </li>
        <li><a href="#">Another element</a>
        </li>
      </ul>
    </li>
    <!--./test1-->

    <li>
      <a href="#" class="nav-header">Test 2</a>
      <ul class="menu">
        <li><a href="#">Element</a>
        </li>
      </ul>
    </li>
    <!--./test2-->

  </ul>

</div>
<!--/.container-->

Stack Overflow Link 到首选答案。

Answer 2

不是 CSS 解决方案，而是简单的 jQuery 切换即可：

代码笔：http://codepen.io/anon/pen/yyZjdE

jQuery(document).ready(function(){
  jQuery('.nav-header').click(function(){
    jQuery(this).siblings('ul.menu').toggle();  
  }); 
});

CSS - Show/hide 当用户单击标题时折叠简单导航

CSS - Show/hide collapse simple navigation when user clicks title

focus

click

show-hide

html-lists