1

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

我正在为我的作品集开发一个网站创意，并决定尝试一些 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;
}

当按下按钮时copyBackground，包含所有副本的 div 意味着以我在 jQuery 函数中设置的速度关闭/打开。但我还想要的是，按钮 div 内的副本从“隐藏内容”更改为“显示内容”，以便用户知道再次按下它以显示他们隐藏的内容。这一切目前都有效，除了字体大小的 CSS 和该 div 中副本的位置在您按下按钮时都会被剥离。

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

在darerdesign.com 上查看它以获取视觉辅助...

4

3 回答 3

0

试试这个： http: //jsfiddle.net/utBg3/ 或者更好的 http://jsfiddle.net/K4Lge/

您也可以使用切换功能，然后根据打开和关闭 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");


        });

    });
});
于 2013-05-16T02:54:32.990 回答
0

您正在用.landingHideButton一些不在标签中的文本替换 div 的 HTML P，因此 CSS 不适用！

尝试使用如下行：

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

编辑：

或者，也许更清楚：

$(".landingHideButton p").html("Show Content");
于 2013-05-16T02:50:11.787 回答
0

我会在适当的元素 ( .landingHideButton p) 中设置文本，并在动画完成后使用切换回调来设置它。

小提琴

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

PS你在你的CSS中它是正确的所以我猜只是一个简单的错误

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

小提琴 2

<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);
});
于 2013-05-16T02:58:25.130 回答