Question

我正在尝试创建一个包含一些子项的简单侧导航。我想我已经想出了怎么做，但我不确定这是不是最好的方式。

<ul>
 <li>Item 1</li>
 <li class="dropdown">Item 2
  <ul class="hidden">
    <li>Item 2 - subitem1</li>
    <li>Item 2 - subitem2</li>
  </ul>
 </li>
<li>Item 3</li>
<li class="dropdown">Item 4
  <ul class="hidden">
    <li>Item 4 - subitem1</li>
    <li>Item 4 - subitem2</li>
    <li>Item 4 - subitem3</li>
  </ul>
</li>
<li>Item 5</li>

<style>
  ul.hidden {
    display:none;
  }  
</style>

<script>
  $(function() {
   $('.dropdown').click(function(){
    $('.hidden').hide();
    $(this).find('.hidden').toggle();
   });
  });  
</script>

Answer 1

如果您愿意，可以使用CSS执行此操作 - on .hidden：action display：block;

您的JS目前隐藏了已被css隐藏的内容 - 然后查找.hidden的所有实例（其中有两个）。您需要一个foreach循环来切换每个下拉菜单 - 然后您还需要一个释放功能来重新隐藏菜单。

Bootstrap可能会给你一个很好的步骤，或者只是使用css。

http://www.w3schools.com/howto/howto_css_dropdown.asp

https://codepen.io/philhoyt/pen/ujHzd

如何使用下拉项创建简单的侧面导航

1 个答案: