文章/答案/技术大牛

发布

社区首页 >问答首页 >用幻灯片动画展开和折叠

问用幻灯片动画展开和折叠
EN

Stack Overflow用户

提问于 2014-11-04 14:45:10

回答 2查看 1.4K关注 0票数 1

我打算有一个可点击的文字与滑动动画。我现在有这样的情况：

(**expand-collapse.js**)：JavaScript

$(document).ready(function() {
    $(".content").hide();

    $(".heading").click(function() {
        var header = $(this);

        header.next(".content").slideToggle(250);
    });
});

HTML:

<head>
    <style>
        .heading {
            cursor: pointer;
            font-weight: bold;
        }
    </style>

    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/expand-collapse.js"></script>
</head>

<body>
    <div class="heading">VIEW SEAT MAP (EXPAND / COLLAPSE)</div>
    <img class="content" src="images/seatmap.png" width="500" height="300" alt="seatmap">
</body>

输出：

到目前为止，它按其应有的方式展开和折叠，而不是有一个静态的文本。

查看座椅地图(展开/折叠)

一直以来，我更喜欢说

查看座椅地图(展开)

视图座椅地图(折叠)

因此，只有EXPAND和COLLAPSE文本可以像<a href>那样单击(与整个标题div相反)。我对JS很陌生。

javascript

jquery

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2014-11-04 14:52:21

在标题中添加一个a：

<div class="heading">VIEW SEAT MAP <a class="slide-toggle">EXPAND</a></div>

处理新a的单击事件，并相应地设置文本：

 $(document).ready(function() {
    $(".content").hide();

    $(".slide-toggle").click(function() {

         $(this).parent().next(".content").slideToggle(250);

         if($(this).text() == 'EXPAND')
         {
             $(this).text('COLLAPSE');
         }
         else
         {
             $(this).text('EXPAND');
         }
    });
 });

注意:我为您保留了这个非常简单的内容，并将这些更改合并到您已经拥有的内容中。可能有更好的整体方法和少量的语法(例如，简写的if语句)，但我暂时保持了简单。

票数 2

Stack Overflow用户

发布于 2014-11-06 02:36:36

这只是为了说明我是如何在DeeMac的回答(标记为接受)的帮助下完成最终输出的。

(**expand-collapse.js**)：JavaScript

$(document).ready(function() {
    $(".content").hide();

    $(".slide-toggle").click(function() {
        $(this).parent().next(".content").slideToggle(250);
        $(this).text() == 'EXPAND' ? $(this).text('COLLAPSE') : $(this).text('EXPAND');
    });
});

HTML:

<head>
    <style>
        .slide-toggle {
            color: blue;
            cursor: pointer;            
            text-decoration: underline;
        }
    </style>

    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/expand-collapse.js"></script>
</head>

<body>
    <strong>VIEW SEAT MAP (<span class="slide-toggle">EXPAND</span>)</strong>
    <img class="content" src="images/seatmap.png" width="500" height="300" alt="seatmap">
</body>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26738013

复制

相似问题

问用幻灯片动画展开和折叠
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用幻灯片动画展开和折叠EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用幻灯片动画展开和折叠
EN