我打算有一个带有滑动动画的可点击文本。我目前有这个:
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>
输出:
到目前为止，它可以正常展开和折叠，但没有显示
查看座位图(展开/折叠)
一直以来，我更喜欢这样说
查看座位图(展开)
查看座位图(折叠)
因此，只有 EXPAND和 COLLAPSE文本可以像 <a href> 一样被点击(与整个标题 div 相反)。我对 JS 很陌生。
最佳答案
在标题中添加一个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 语句)，但我现在保持简单。
关于javascript - 使用幻灯片动画展开和折叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26738013/