javascript - 动画高度切换以了解更多/更少-6ren

javascript - 动画高度切换以了解更多/更少

转载作者：行者123 更新时间：2023-12-02 15:30:54

26

4

我在这方面遇到了很多麻烦。我需要更改这些“阅读更多/更少”按钮，以便当文本展开并再次返回时，“阅读更多”一词更改为“阅读更少”。我尝试过使用 readmore.js 但无法让它工作。所以我正在努力做我自己的事情。但即使这样也行不通，因为我不太擅长 Javascript。这是我得到的。我知道这很糟糕。感谢您提供的任何帮助。我还需要使该按钮仅适用于其上方的 div。不是全部。

HTML

<html>

  <head>
    <title>jQuery Read More/Less Toggle</title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script type="text/javascript"> 
        $(document).ready(function(){
            $(".btn1").click(function(){
                $(".more").animate({height: "290"});
        });

            $(".btn2").click(function(){
                $(".more").animate({height: "90px"});
            });
        });
    </script>
    </head>

  <body>
    <div class="container">
        <div class="more" id="more1">
          Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.  Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.  Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
        </div>
        <div class="btn1" for="more1">
            <p class="btn_text">Read More &#8897</p>
            ______________________________________________
        </div>
        <div class="btn2" for="more1">
            <p class="btn_text">Read Less &#8896</p>
            ______________________________________________
        </div>
    </div>
    <div class="container">
        <div class="more">
          Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.  Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.  Morbi placerat imperdiet risus quis blandit. Ut lobortis elit luctus, feugiat erat vitae, interdum diam. Nam sit amet arcu vitae justo lacinia ultricies nec eget tellus. Curabitur id sapien massa. In hac <a href="#">habitasse</a> platea dictumst. Integer tristique leo consectetur libero pretium pretium. Nunc sed mauris magna. Praesent varius purus id turpis iaculis iaculis. Nulla <em>convallis magna nunc</em>, id rhoncus massa ornare in. Donec et feugiat sem, ac rhoncus mauris. Quisque eget tempor massa.
        </div>
        <div class="btn">
            <p class="btn_text">Read More &#8897</p>
            ______________________________________________
        </div>
        <div class="btn2" for="more1">
            <p class="btn_text">Read Less &#8896</p>
            ______________________________________________
        </div>
    </div>
  </body>

</html>

CSS

.more {
    width: 600px;
    overflow: hidden;
    height: 90px;
}

.btn1 {
    cursor: pointer;
    width: 500px;
}

.btn2 {
    cursor: pointer;
    width: 500px;
}
.btn_text {
    margin-bottom: -10px;
}

最佳答案

尝试使用 .data() 设置/获取展开状态，并使用 .html() 切换文本，

$(document).ready(function () {
    $('.btn').data("expanded",false);
    $(".btn").click(function () {
        var val = $(this).data('expanded');
        $(this).data('expanded', !val);
        $('p', this).html(val ? "Read More &#8897" : "Read Less &#8896");
        $(".more",$(this).closest('.container')).animate({
            height: val ? '90' : "290"
        });
    });
});

DEMO

关于javascript - 动画高度切换以了解更多/更少，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33322124/

26

4

0

文章推荐： javascript - 将数据加载到嵌套的可折叠集中

文章推荐： javascript - 考虑 undefined variable

文章推荐： javascript - JS 函数不适用于动态字段

文章推荐： javascript - 嵌套函数在 JavaScript 中不起作用(YouTube API)

ios - 如何使“更多”按钮始终进入“更多 View ”？
我正在开发一个带选项卡栏的 ios 应用程序。我的栏上有超过 5 个按钮，所以在 iphone 上我有更多的按钮。现在，假设我有这个按钮:Button1 Button2 Button3 Button4
ios - 修改 UITabBarController 的“更多”选项卡中显示的选项卡导航栏上的“更多”按钮
我有一个带有 UITabBarController 的应用，其中有超过五个选项卡。当我按更多选项卡时，我会转到moreNavigationController，它是一个UINavigationCon
ios - 当我单击“更多”按钮而不是我离开的 VC 时，如何返回 iOS 中“更多...”按钮的 "Table"
我有一个导航 Controller 。 NAVC->MORE... 按钮，然后在“更多”下有一些额外的 VC。如果我转到“更多...”下的 VC，然后转到不在“更多...”上的 VC，那么当我返回到
c# - (更多)线程二叉树中旋转节点时的高效锁定
因此，我想出了这种方案，用于在多个线程同时具有读写访问权限的二叉树中旋转时锁定节点，这涉及每次旋转锁定四个节点，这似乎是一个很多吗？我想到了一种比我想出的方法更聪明的方法来减少所需的锁定，但谷歌并没有
css - 无法将我的下拉菜单与下拉按钮对齐(更多)
所以我已经尝试了所有方法，但我似乎仍然无法将下拉内容与 dropbtn 对齐。我只希望内容始终位于更多菜单下方。 HTML: `
linux - 期待和——更多——
我正在尝试使用 expect 来自动接受在 --more-- 中提示的 EULA。 #!/usr/bin/expect spawn "./greenplum-perfmon-web-4.1.2.0-b
javascript - 更多/更少的影响
他们如何在下面提供的网站上制作“告诉我更多”效果。我读过 read more/less effect in jQuery，但我发现该站点的有趣之处在于，除非单击该按钮，否则无法滚动页面。 Effect
scala - 更多 Scala 打字问题
现在，Kim Stebel helped me understanding如何使用存在类型键入变量，我需要知道如何在继承中使用它们: 以下代码无法编译: class PagingListModel(s
cygwin - Cygwin不提供“更多”命令吗？
在我的Cygwin中不可用。另一方面，提供了“ less”命令。也许Cygwin的制造商认为“更多”只是多余的。我对此很好奇。最佳答案安装util-linux软件包，您将获得“更多”的信息 ht
Azure:更多 DTU 还是更多分片？
基本上，我想知道是否有人有增加 DTU 与分片的经验。 DTU应该线性地提高性能。因此，如果您有 5 个 DTU，而您改为 10 个 DTU，那么(理论上)您应该获得大约两倍的性能。因此，四个 SQ
javascript - 更多 DOM 元素造成性能问题
我们使用 asp.net mvc、javascript 和 jQuery(托管在本地计算机上)创建了一个应用程序。基本设计是，当用户从一个页面导航到其他页面时，我们通过隐藏和显示 HTML 页面，将所
haskell - 更多 rmonad 库？
我想用 RMonad 做一些基本的事情。有没有办法使用“as monad”功能来有一个身份 rmonad，可以应用 monad 转换器吗？有诸如 StateT 变压器之类的常见东西吗？向现有 m
c - 如何检查数组的元素是否被占用？ +1 更多
我有一个 char*[] 数组。我需要能够为其分配字符串并再次删除它们，但我不知道: 如何检查一个元素中是否已经有一个字符串，这样我就不会覆盖它，如果它已经被占用，则继续处理下一个元素？之后如何将其
Azure:更多 DTU 还是更多分片？
基本上，我想知道是否有人有增加 DTU 与分片的经验。 DTU应该线性地提高性能。因此，如果您有 5 个 DTU，而您改为 10 个 DTU，那么(理论上)您应该获得大约两倍的性能。因此，四个 SQ
unix - 如何仅在错误输出时使用寻呼机(更多/更少)
我有一个程序可以同时吐出标准错误和标准输出，我想在标准错误上少运行寻呼机，但忽略标准输出。我该怎么做？更新: 就是这样......我不想丢失标准输出......只是让它远离寻呼机 program 2
jquery - 如何让段落的其余部分在“更多...”链接上设置动画？
基本上，当单击具有类 "dropdown" 的链接时，我无法获取“更多...”链接来对下一个跨度的高度进行动画处理。它根本就没有动画。仅当更改为 Less... 链接并且单击 Less... 链接以折
javascript - 更多 Javascript 状态图框架
我正在使用 ExtJS，并认为它是一个了不起的框架。但是，它们没有内置的状态图，这使得依赖于状态的应用程序开发非常痛苦。我最近发现了这个: https://github.com/jakesgordo
c - 更多 C 指针问题
我一直在研究数据结构和算法，遗憾的是在C中。我已经单独实现了一个双向链表，它保存整数并且工作正常，但是当节点(或pub)让它正常工作时我遇到了很多麻烦在本例中)保存多个不同类型的值。我可以创建一个列表
c# 使用声明-更多 = 好还是坏？
编辑拼写错误你好，这可能是一个愚蠢的问题，但如果它能帮助我遵循最佳实践，我不在乎:P 假设我想在 System.Data 命名空间...以及 System.Data.SqlClient 命名空间中
javascript - 单击时更改按钮文本(更多/更少)
使用 bootstrap 3 CSS、font awesome CSS 和最新的 jQuery JS 文件。我正在使用 javascript 在单击按钮时在另一个内容 div 之上隐藏/显示一个内容

首页

博学

6Ren·AI

商城

javascript - 动画高度切换以了解更多/更少

DEMO