如何让我的div在第二次点击时恢复原来的背景颜色?

时间:2013-02-20 11:27:36

标签: jquery html css addclass removeclass

我正在使用jquery addClass和removeClass动画功能。

我正在做的是当链接被点击时...下拉导航将出现...它是针对响应式网站...但所有这些都有效。但是会发生什么......当单击div类的链接更改并且链接类发生更改时...这是有效的

然而,当链接现在第二次被点击时...我希望这两个类恢复到他们所在的默认类

这是我的代码:

<div class="display-menu">
<div class="container">
<a id="displaymenu" class="click" style="color:#ffffff;" href="javascript:slideToggle();">In This Section</a>
<script>
    $("a.click").click(function(){
        $("div.display-menu").removeClass("display-menu").addClass("display-menu1");
        $("a.click").removeClass("click").addClass("current");
    });
</script>
</div>
</div>

有人对我有任何想法吗?

3 个答案:

答案 0 :(得分:4)

尝试使用toggleClass

    $("div.display-menu").toggleClass("display-menu").toggleClass("display-menu1");
    $("a.click").toggleClass("click").toggleClass("current");

答案 1 :(得分:3)

在顶级div中添加了id,并将更改的代码添加到元素ID

<div class="display-menu" id="displaydiv">
    <div class="container">
        <a id="displaymenu" class="click" style="color:#ffffff;" href="javascript:slideToggle();">In This Section</a>
        <script>
            $("a.click").click(function(){
                $("div#displaydiv").toggleClass("display-menu display-menu1");
                $("a#displaymenu").toggleClass("click current");
            });
        </script>
    </div>
</div>    

答案 2 :(得分:1)

由于您正在更改课程,因此最好使用id作为选择器,并且像其他人所说的那样,使用切换课程。

否则,处理程序中的选择将不会在第二次单击时起作用。

<div id="display-menu-div" class="display-menu">

$("#displaymenu").click(function(){
    $("#display-menu-div").toggleClass("display-menu display-menu1");
    $("#displaymenu").toggleClass("click current");
});