jquerytoggle抛弃了CSS

我在网上找不到一个问题的答案

我正在为我的投资组合构思一个网站创意，并决定涉足其中 一些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>

按下按钮时，div

copyBackground

，其中包含所有 复制意味着以我在jQuery函数中设置的速度关闭/打开。 但我也想要的是，button div中的副本可以从 “隐藏内容”可“显示内容”，以便用户知道再次按该按钮可显示内容 他们隐藏的内容。除了字体大小CSS之外，所有这些都可以在当前使用 而副本在该div中的位置在您 按下按钮

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

---

在DarrDesign.com上查看它的实际操作，以获取视觉帮助…

您正在用一些不在

p

标记中的文本替换

.landingHideButton

div的HTML，因此CSS不适用

尝试使用类似以下的行：

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

试试这个：或者更好

您还可以使用切换功能，然后根据打开和关闭div更改内容

希望有帮助

代码

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

其他选项

$(document).ready(function () {
    $(".landingHideButton").click(function () {
        $(".copy-background").toggle(2000, function () {

            $(this).is(':visible') ? $(".landingHideButton > p").html("Hide Content") : $(".landingHideButton > p").html("Show Content");


        });

    });
});

---

我将在适当的元素（

.landingHideButton p

）中设置文本，并在动画完成后使用回调切换来设置文本

顺便说一句，你的css中有正确的内容，所以我想这只是一个简单的错误

---

---

或者这个选项，其中隐藏和显示实际上都在那里，但是隐藏对，并且一次只有一个可见。在切换复制的相同持续时间内轻轻切换按钮文本

---

这成功了！！！非常感谢。老实说，我觉得这是一个小问题，因为我不太了解jquery语法，但我从这次经历中学到了一些东西，我想这会更好我非常感谢您的快速响应！这实际上更好。我只是想要一些简单的东西，但是在看到这个jquery的实际应用之后，我更愿意在我的设计中使用它。谢谢你知道的越多…@GaryDarer别担心&很高兴这有帮助，现在别忘了接受其中任何一个人的回复！再见。

：）

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

$(document).ready(function () {
    $(".landingHideButton").click(function () {
        $(".copy-background").toggle(2000, function () {

            $(this).is(':visible') ? $(".landingHideButton > p").html("Hide Content") : $(".landingHideButton > p").html("Show Content");


        });

    });
});

 $(".copy-background").toggle({
     duration: 2000,
     complete: function () {
         $(".landingHideButton p").text("Show Content");
     }
 });

<div class="landingHideButton">
    <p class="hide">Hide Content</p>
    <p class="show">Show Content</p>
</div>

$(".landingHideButton").click(function () {
    var dur = 2000;
    $(".copy-background").toggle(dur);
    $(this).find('.hide,.show').slideToggle( dur);
});