javascript - 单击我的导航按钮时切换我的菜单

Question

我想要实现的是当我点击我的 <div> 时类“菜单”我<ul>出现类“nav”，当再次单击时，它会切换以使其不可见。

HTML

<div class="menu">
  <div class="line"></div>
</div>
<ul class="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Prices</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

JavaScript

$('line').click(function(){
    $('ul.nav').slideToggle();
})

Answer 1

建立Ronnie的评论，你应该使用 jQuery 的 .toggleClass()方法，但您还需要更改访问 <ul> 的方式，因为，一旦你删除了 nav类，将不再使用 $('ul.nav') 找到它.

尝试添加 id属性 <ul> (我在下面使用了“navMenu”)然后用它来选择 <ul> .然后你可以使用.toggleClass("nav") ，像这样:

HTML

    <div class="menu">
        <div class="line"></div>
    </div>

    <ul id="navMenu" class="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Prices</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

JavaScript

$(".line").click(function() {
    $("#navMenu").toggleClass("nav");
;})

编辑:这假设 <ul>默认情况下(可能使用 CSS)是不可见的，并且通过应用“nav”类，它是可见的。