jquery - 使用 jQuery 的 toggleClass() 动态改变段落的位置

Question

这实际上看起来很简单，我有点惊讶它不起作用:
所以，我有这个版权文本( <p> )，它使用 bottom: 0 粘贴在页面底部CSS 属性。

但我还有一个<div>与 display: none然后与 jQuery 的 .slideToggle() 一起出现函数并显着增加网页的高度并创建一个滚动条——这在以前是不需要的。

问题是，除非我使用 jQuery 的 .css()，否则版权文本不会自动转到页面的新“底部”功能。但是.css()没有“切换”选项——至少据我所知——所以当栏再次消失时我无法将其恢复。

所以我尝试使用 toggleClass()功能使其工作。出于某种原因，它根本没有任何作用。

这是简化后的代码:
HTML:

<div id="fullInfo">Some Text</div>
<p class="copyright">&copy; 2015 by THE COMPANY NAME. All rights reserved.</p>

CSS:

div#fullInfo {
    width: 102%;
    height: 448px;
    position: absolute;
    top: 490px;
    display: none;
    bottom: 30px;
    left: -17px;
}


p.copyright {
    position: absolute;
    bottom: -7px;
    left: 40%;
}

.togged {
    bottom: -307px;
}

JavaScript/jQuery:

$("#button").click(function(){
     $("#fullInfo").slideToggle();
     $(".copyright").toggleClass("togged");
});

---

当我添加 !important 时它起作用了至 .togged在 CSS 中，但据我所知，应该非常谨慎地使用它。
那么有没有其他方法可以解决这个问题？

Answer 1

试试这个

p.copyright.togged {
    bottom: -307px;
}

此处演示:https://jsfiddle.net/nr82mzd1/