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”类，它会变得可见。

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

1 个答案: