在用户使用
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
现在我希望能够在点击#nav时显示.side-categories
我刚开始学习JQuery,这就是我想出的.然而,它没有用.我希望有人能告诉我这里做错了什么.
$( document ).ready(function() {
$('#nav').on('click')event(function()) {
event(showNavBar);
$('.side-categories').show();
});
});
解决方法
一个好方法是使用类隐藏侧边栏菜单.
在你的CSS中：
.hide {
display: none;
}
在你的HTML中:(如果你想要,可以删除< a>,因为jQuery可以检测到任何元素的点击)
<li id="navicon"> <img class="nav" src ="/assets/navicon-round.svg/" /> </li> <ul class="side-categories hide"> <li><a href="#">CSS</a></li> <!-- More menu items --> </ul>
然后在你的jQuery中：
$(function() {
$('.nav').on('click',function(e) {
e.preventDefault();
$('.side-categories').toggleClass('hide');
});
});
这是一种非常简单的方法,允许用户通过单击相同的按钮再次隐藏侧面菜单 – 这通常是预期的行为.
另一个好处是你可以保持你的功能和风格分开.
