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

不是CSS解决方案，但简单的jQuery切换工作正常：

Codepen：http://codepen.io/anon/pen/yyZjdE

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

Answer 2

基本上，span无法接收focus。

最佳解决方案是使用可以接收focus的元素，如锚链接，或者首选实际按钮。

为方便起见，我在这里使用了一个链接，但是因为Links are not buttons

，按钮会更好

＆＃13;

/* 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;
}

＆＃13;

<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-->

＆＃13;

Stack Overflow Link首选答案。

CSS - 当用户单击标题时显示/隐藏折叠简单导航

2 个答案: