Question

我打算有一个带有滑动动画的可点击文字。我目前有这个：

JavaScript：（expand-collapse.js）

$(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>

输出：
enter image description here

到目前为止，它应该扩展和折叠，但不是一个静态文本，而是

查看座位图（扩展/折叠）

一直以来，我更喜欢说中文查看座位图（EXPAND）
查看座位图（折叠）

相应地，只有EXPAND和COLLAPSE文本可以像<a href>一样点击（而不是整个标题div）。我是JS的新手。

Answer 1

向标题添加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语句），但我现在已经保持简单。

Answer 2

这只是为了说明我是如何借助DeeMac的答案（标记为已接受）来进行最终输出的。

JavaScript：（expand-collapse.js）

$(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>

使用幻灯片动画展开和折叠

2 个答案: