Question

这实际上看起来非常简单，我有点惊讶它不起作用：
因此，我使用<p> CSS 属性将此版权文本（bottom: 0）粘贴到页面底部。

但我还有<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");
});

<小时/> 当我在 CSS 中添加!important到.togged时，它有效，但从我听到的情况来看，它应该非常谨慎地使用。
那么还有其他方法可以解决这个问题吗？

Answer 1

试试这个

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

在这里演示：https://jsfiddle.net/nr82mzd1/

使用jQuery的toggleClass（）

1 个答案: