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

【问题标题】：Toggle my menu when you click my nav button单击我的导航按钮时切换我的菜单
【发布时间】：2015-01-31 04:37:28
【问题描述】：

我想要实现的是，当我点击我的<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();
})

【问题讨论】：

google, "toggle class jquery" 你会找到很多答案
$('line') 应该是$('.line')
是的，无论何时使用类，都必须使用句点。只要是 id，就使用 #。
完美，感谢您的提示。我刚刚开始。很棒
@mrwienerdog - 但仅适用于选择器。 . .我们不希望他使用.toggleClass(".nav") 切换课程。 ;)

标签： javascript jquery html css

【解决方案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”类使其可见。

【讨论】：