如何在点击时显示菜单

Question

在用户使用JQuery单击页面上的单独元素后,如何显示元素？

我创建了一个包含以下HTML的侧边菜单:

<li id="navicon">
  <a href="" class="nav">
    <img src ="/assets/navicon-round.svg/" />
  </a>
</li>  
<ul class="side-categories">
    <li><a href="">CSS</li></a>
    <li><a href="">HTML</li></a>
    <li><a href="">JS/Jquery</li></a>
    <li><a href="">Miscellaneous</li></a>
</ul>

我设置.side-categories为display:none

现在我希望能够.side-categories在点击时显示#nav

我刚刚开始学习JQuery,这就是我想出的.然而,它没有用.我希望有人能告诉我这里做错了什么.

$( document ).ready(function() {
     $('#nav').on('click')event(function()) {
     event(showNavBar);
          $('.side-categories').show();
    });
});

Answer 1

工作小提琴。

你应该替换：

event(showNavBar);

经过 ：

e.preventDefault();

完整代码：

 $(function() {     
    $('.nav').on('click',function(e) {
        e.preventDefault();
        $('.side-categories').show();
    });
});