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

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

javascript jquery html css

Javascript 使用幻灯片动画展开和折叠,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我打算有一个滑动动画点击文本。我目前有： JavaScript:（展开collapse.js） HTML: <head> <style> .heading { cursor: pointer; font-weight: bold; } </style> <script src="js/jquery-1.11.1.min.js"></scr

我打算有一个滑动动画点击文本。我目前有：

JavaScript:（
展开collapse.js
）

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>

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


.标题{
光标：指针；
字体大小：粗体；
}
查看座椅地图（展开/折叠）

输出：

到目前为止，它按其应该的方式展开和收拢，但没有显示一个静态文本

查看座椅地图（展开/折叠）

一直以来，我都喜欢说

查看座位地图（展开）
查看座椅地图（折叠）

因此，只有

展开

和

折叠

文本可以像

一样单击（与整个标题div相反）。我对JS非常陌生。

在标题中添加一个

：

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

注意：我为您保留了非常简单的内容，并将这些更改合并到您已有的内容中。可能有更好的总体方法和少量的语法糖分（例如，速记

if

语句），但我现在一直保持简单。

这只是为了说明我是如何在DeeMac的答案（标记为已接受）的帮助下完成最终输出的

JavaScript:（
展开collapse.js
）

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>

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


.滑动开关{
颜色：蓝色；
光标：指针；
文字装饰：下划线；
}
查看座位地图（展开）

您好，迪马克先生，我已经用您建议的答案替换了所有相应的代码，图像不再扩展。仍然没有生效，先生，多次刷新了我的HTML页面。我已更改为

$（this）.parent（）

和


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