5

我正在尝试制作一个与导航功能完全一样的网页：http ://www.rex-ny.com/在其中单击列表项，其子项会出现并保留。

我可以用悬停来做到这一点，但我不知道如何让它在不悬停时保持不变。

似乎最简单的事情是最难做的。

<ul id="menu">
    <li><a href="#">Menu 1</a>
            <ul>
                <li><a href="#">Item A</a></li>
                <li><a href="#">Item B</a></li>
                <li><a href="#">Item C</a></li>
           </ul>
    </li>
    <li><a href="#">Menu 2</a>
            <ul>
                <li><a href="#">Item A</a></li>
                <li><a href="#">Item B</a></li>
                <li><a href="#">Item C</a></li>
           </ul>
    </li>
    <li><a href="#">Menu 3</a>
            <ul>
                <li><a href="#">Item A</a></li>
                <li><a href="#">Item B</a></li>
                <li><a href="#">Item C</a></li>
           </ul>
    </li>
</ul>

谢谢

这是一个 jsfiddle http://jsfiddle.net/phzuC/

4

2 回答 2

4

这是 OP 要求的纯 CSS 解决方案，使用tabindex

演示http://jsfiddle.net/kevinPHPkevin/phzuC/2/

#menu li > ul {
    display:none;
}

#menu li:focus > ul {
    display:block;
}
li {
    outline: 0; 
}

已编辑

如果您需要，这里有一个 jQuery 解决方案。它使子菜单保持打开状态，并且易于实现。11 行代码。

演示http://jsfiddle.net/kevinPHPkevin/phzuC/5/

 $(document).ready(function() {
  $(".nav-top > li").click(function(e) {
  if($(this).find('ul').hasClass('expanded')) {
      $(this).find('ul').removeClass('expanded').hide();
  } else {
    $(this).find('ul').addClass('expanded').show();
  }
  });
  $('.nav-top a').click(function(e){
    e.preventDefault(); 
  });
});
于 2013-08-29T21:13:22.777 回答
0

这是另一个使用 CSS 的解决方案：

  • 如果您希望菜单在点击时切换，请勾选复选框
  • 单选按钮，如果您希望菜单在选择另一个菜单时自动关闭

参考：

演示

基本行为 CSS（演示具有更多样式以删除默认列表缩进/项目符号）：

.sideMenu input[type='radio'], 
.sideMenu input[type='checkbox'] {
    display: none;
}
.sideMenu input[type='radio'] + ul, 
.sideMenu input[type='checkbox'] + ul {
    position: relative;
    display: none;
}
.sideMenu input[type='radio']:checked + ul, 
.sideMenu input[type='checkbox']:checked + ul {
    display: block;
}

HTML（可以任意深）：

<nav class="sideMenu">
    <ul>
        <li>
            <label for="menu1">Menu 1</label>
            <input id="menu1" type="checkbox" name="menu1">
            <ul>
                <li><a href="#">Item A</a></li>
                <li><a href="#">Item B</a></li>
                <li><a href="#">Item C</a></li>
            </ul>
        </li>
        <!-- repeat -->
   </ul>
</nav>
于 2013-08-29T21:31:07.810 回答