Jquery Toggle 丢弃 CSS

Question

我无法在网上找到我的问题的单一答案...

我正在为我的投资组合构思一个网站创意，并决定涉足 一些 jQuery 让它更令人兴奋。我正确链接了 jQuery 并且 工作，但是当我使用 .toggle 方法时，我的按钮的 CSS 似乎消失了。

这是我目前为止的 jQuery:

$(document).ready(function(){
  $(".landingHideButton").click(function(){
    $(".copy-background").toggle(2000);
    $(".landingHideButton").html("Show Content");
  });
});

我的 HTML 结构如下所示:

<div id="landing">
    <div class="copy-background">
        <h4>Header</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo enim, euismod nec ultrices id, ultrices vitae nisl. Aenean pharetra congue tempor. Pellentesque nisi nisl, aliquam ut pulvinar sed, tristique pretium tortor. In commodo lobortis euismod. Aliquam nisl risus, rutrum sed facilisis id, ultrices a nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="landingHideButton">
        <p>Hide Content</p>
    </div>
</div>

landingHideButton 的排版 css 是:

.landingHideButton p {
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 10pt;
    font-weight: 500;
    color: #7d7d7d;
}

按下按钮时，div copyBackground，其中包含所有 copy 意味着以我在 jQuery 函数中设置的速度关闭/打开。 但我还想要的是将按钮 div 内的副本从 “隐藏内容”到“显示内容”，以便用户知道再次按下它来显示 他们隐藏的内容。目前这一切都有效，除了 font-size CSS 当你 按下按钮。

有谁知道如何防止它这样做，或者是否有更好/更清洁的方法 完成这项任务的方法？请记住，我对此很陌生，所以如果可能的话， 请保持简单的答案。我在某种程度上理解脚本术语 但我从来没有上过这方面的课，只知道我从 W3Schools.com 学到了什么......

在 darerdesign.com 上查看它的实际效果以获得视觉帮助...

Answer 1

您将 .landingHideButton div 的 HTML 替换为 不 在 P 标记中的一些文本，因此 CSS 不是不申请!

尝试使用如下一行:

$(".landingHideButton").html("<p>Show Content</p>");

编辑:

或者，也许更清楚:

$(".landingHideButton p").html("Show Content");