如何编辑此导航使其成为点击导航而不是悬停导航？

Question

这是我要编辑的以下代码段。 http://www.cssscript.com/simple-accordion-menu-with-css3-transitions/

继承人演示http://www.cssscript.com/demo/simple-accordion-menu-with-css3-transitions/

我想点击下拉列表并保持下拉状态，直到我再点击另一个菜单或同一个菜单。

我对如何做到这一点有任何想法？

Answer 1

找到了解决方案。

在这里：fiddle

.menu li a:focus + ul li a{ styles here}

我还在链接（锚点）上添加了jQuery等效的JavaScript返回false - 因为默认情况下，如果找不到该跳转点，带有a #link的锚点将重新加载页面。如果您的代码允许，您可以在菜单的第一级使用除锚之外的其他元素，而不需要JavaScript。

Answer 2

使用target伪类代替悬停。注意我已经为每个子菜单添加了一个ID，并使用顶级导航项链接到该部分。

＆＃13;

＆＃13;

.menu {
  margin: 0 auto;
  padding: 0;
  width: 350px;
}

.menu li { list-style: none; }

.menu li a {
  display: table;
  margin-top: 1px;
  padding: 14px 10px;
  width: 100%;
  background: #337D88;
  text-decoration: none;
  text-align: left;
  vertical-align: middle;
  color: #fff;
  overflow: hidden;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.4s;
  -webkit-transition-timing-function: ease-out;
  transition-property: background;
  transition-duration: 0.4s;
  transition-timing-function: ease-out;
}

.menu > li:first-child a { margin-top: 0; }

.menu li a:hover {
  background: #4AADBB;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-property: background;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

.menu li ul {
  margin: 0;
  padding: 0;
}

.menu li li a {
  display: block;
  margin-top: 0;
  padding: 0 10px;
  height: 0;
  background: #C6DDD9;
  color: #1F3D39;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}

/*This selector has changed*/
.menu > li > ul:target li a { 
  display: table;
  margin-top: 1px;
  padding: 10px;
  width: 100%;
  height: 1em;
  -webkit-transition-property: all;
  -webkit-transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-property: all;
  transition-duration: 0.3s;
  transition-timing-function: ease-out;
}

/*This selector has changed*/
.menu > li > ul:target li a:hover {
  background: #A4CAC8;
  -webkit-transition-property: background;
  -webkit-transition-duration: 0.2s;
  -webkit-transition-timing-function: ease-out;
  transition-property: background;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}

＆＃13;

<nav id="menu_box">
  <ul class="menu">
    <li> <a href="#sub1">Menu 1</a> <!-- Note the href change here -->
      <ul id="sub1"><!-- Note the ID here -->
        <li><a href="#">Menu 1.1</a></li>
        <li><a href="#">Menu 1.2</a></li>
      </ul>
    </li>
    <li> <a href="#sub2">Menu 2</a>
      <ul id="sub2">
        <li><a href="#">Menu 2.1</a></li>
        <li><a href="#">Menu 2.2</a></li>
        <li><a href="#">Menu 2.3</a></li>
      </ul>
    </li>
    <li> <a href="#sub3">Menu 3</a>
      <ul id="sub3">
        <li><a href="#">Menu 3.1</a></li>
        <li><a href="#">Menu 3.2</a></li>
        <li><a href="#">Menu 3.3</a></li>
        <li><a href="#">Menu 3.4</a></li>
      </ul>
    </li>
    <li> <a href="#">Menu 4</a> </li>
  </ul>
</nav>

＆＃13;

＆＃13;

＆＃13;