已经隐藏的div如何切换隐藏状态？

Question

我希望#profile-menu起初被设置为.hidden，当用户点击.profile-toggle时，应该添加或删除.hidden类。如何在jQuery中实现这个功能？

以下是我的尝试:

HTML:

<div class="main">
    <div class="container">
        <div class="nav-bar">
            <button class="profile-toggle" type="button" data-toggle="dropdown">Profile</button>
           <button type="button">Sign up</button>
        </div>
    </div>
</div>

<ul class="side">
    <li id="profile-menu" class="hidden">TOGGLE THIS MATE</li>
</ul>

JavaScript：

$(".profile-toggle").click(fucntion() {
    if ($(".side li#profile-menu").is(".hidden")) {
        $(".side li#profile-menu").removeClass("hidden");
        $(".side li#profile-menu").addClass("show");
    }
    else { 
        $(".side li#profile-menu").addClass("hidden");
        $(".side li#profile-menu").removeClass("hidden");
    }
});

- shinnon

---

你的 fucntion() 有拼写错误。 - Shaunak D

<div class="main"> <div class="container"> <div class="nav-bar"> <button class="profile-toggle" type="button" data-toggle="dropdown">个人资料</button> <button type="button">注册</button> </div> </div> </div> - shinnon

哦，该死让我检查一下。 - shinnon

不好意思，那并没有解决问题。触发器是嵌套在几个 div 中的按钮。 - shinnon

你能否提供更多关于HTML的上下文信息，以及您想要显示和隐藏的位置？另外，既然您正在使用jQuery，为什么不使用jQuery的show() http://api.jquery.com/show/ 和hide() http://api.jquery.com/hide/函数呢？ - Josep Valls

Answer 1

jQuery有一个名为.toggleClass()的函数

只需使用：

$(".side li#profile-menu").toggleClass("hidden");

- pSaadi

Answer 2

在 function 中有一个拼写错误（你写成了 fucntion），但它可以简化为：

jQuery(function($) {
  $(".profile-toggle").click(function() {
    $("#profile-menu").toggleClass("hidden show")
  });
})

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="profile-toggle">profile-toggle</button>
<ul class="side">
  <li id="profile-menu" class="hidden">TOGGLE THIS MATE</li>
</ul>

- Arun P Johny

---

如果你在其他地方都使用 $，为什么要使用 jQuery(function ()...)？ - royhowie

@royhowie应该使用jQuery(function($) {。 - Arun P Johny

Answer 3

移除类并添加样式或将类定义为 -

.hidden {display: none;}

HTML

<ul class="side">
     <li id="profile-menu" style="display:none;">TOGGLE THIS MATE</li>
</ul> 

使用 toggle()。

$(".profile-toggle").click(fucntion() {
     $(".side li#profile-menu").toggle();
});

- Sougata Bose