实现单一习题答案的滑动显隐效果的网页
我写了一个习题答案的简单网页，反复单击习题选项后面的“提示”字符，可依次产生相应答案的滑动显隐效果（代码模板如下），不过现在还无法做到，任何时候最多只有一个显示答案出现的要求，即显示下一个答案就会自动隐藏上一个答案。烦请高人指点一下应该如何改写（请给出改写结果），谢谢！
- 习题1 提示
- 答案1 习题2 提示
- 答案2 习题3 提示
- 答案3
这种方法看对你有用麽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴</title>
<style type="text/css">
span {
text-align: center;
line-height: 40px;
background-color: tomato;
color: thistle;
}
p {
display: none;
height: 300px;
display: "inline-block",
}
section {
margin: auto;
}
</style>
</head>
<body>
<section>
<div><span>动漫</span>
<p style="overflow: hidden;overflow: auto;">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Aspernatur soluta,
impedit consequuntur dolore
cumque nostrum deserunt totam maxime a? Ab delectus suscipit ducimus harum modi, placeat laborum esse
odio voluptatibus.
Fugiat rerum alias corrupti, modi vel molestiae vero explicabo magni suscipit distinctio perferendis
eligendi consequatur assumenda dolores reiciendis consequuntur quaerat. Asperiores totam modi veniam,
dolores aspernatur enim aut et laudantium!
Exercitationem expedita impedit inventore quod veniam neque harum, eveniet consequuntur cum rerum sunt
nobis similique! Commodi, autem magnam. Maiores dicta aliquid numquam! Vel labore repellat sapiente eum
laudantium quae impedit!
Veritatis, omnis sint? Accusantium rerum ipsa neque dignissimos vel nisi enim veniam ducimus praesentium
id. Corrupti explicabo quaerat eaque dolore quod officiis assumenda illo dicta nostrum, quas, recusandae
nemo autem!
Repellendus corporis ad omnis eaque, labore asperiores, excepturi obcaecati vero, maxime ut nam magnam?
Rerum pariatur veritatis, labore ab consequuntur adipisci? Itaque dolorem ut placeat velit quos voluptas
cum exercitationem.
Accusamus et labore qui consectetur, deserunt at illum suscipit in minima, veniam vel sunt fuga quam
cumque amet recusandae consequatur delectus quas iure. Vero odit quae amet, asperiores eius sed.
Itaque, quo quae nihil accusamus, dolorem nisi quasi doloremque sapiente, similique non eligendi. Quia
quasi eum, molestias quas odit, temporibus sit consequatur fugiat sapiente, ex distinctio libero dolor
tempora hic?
Accusamus facilis debitis quia delectus non deserunt, sequi, blanditiis distinctio laborum quisquam
veritatis ipsa at reprehenderit dolore ducimus vitae dolorum architecto ipsum alias totam optio harum
temporibus omnis. Doloremque, suscipit.
A ducimus aliquid non neque quasi quas, animi expedita illo possimus, reprehenderit consequatur?
Quisquam maiores tenetur labore voluptatum suscipit maxime laborum nisi laudantium aspernatur aperiam.
Atque iure laudantium numquam. Et.
Architecto unde totam suscipit perspiciatis? Quidem quas necessitatibus, non dolorem dignissimos animi
in cupiditate fuga consequatur cumque quis deleniti natus laboriosam quia praesentium optio ex,
explicabo blanditiis quam? Eligendi, eos.</p>
</div>
<div><span>电影</span>
<p style="overflow: hidden;overflow: auto;">Lorem ipsum dolor sit amet consectetur adipisicing elit. A
error, molestias earum
labore officiis voluptate non voluptatibus impedit beatae cumque, ea rerum minima id eius nam delectus
suscipit eos similique!</p>
</div>
<div><span>电视</span>
<p style="overflow: hidden;overflow: auto;">Lorem ipsum dolor sit amet consectetur adipisicing elit. A
error, molestias earum
labore officiis voluptate non voluptatibus impedit beatae cumque, ea rerum minima id eius nam delectus
suscipit eos similique!</p>
</div>
<div><span>英语</span>
<p style="overflow: hidden;overflow: auto;">Lorem ipsum dolor sit amet consectetur adipisicing elit. A
error, molestias earum
labore officiis voluptate non voluptatibus impedit beatae cumque, ea rerum minima id eius nam delectus
suscipit eos similique!</p>
</div>
</section>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$("section").css({
width: 800 + "px",
height: 500 + "px",
border: "1px solid red"
})
$("span").css({
width: 800 + "px",
height: 40 + "px",
border: "1px solid red",
display: "inline-block",
})
$("section").on("click", "span", function() {
let next = $(this).next();
next.slideToggle("slow");
$("p").not(next).slideUp();
})
</script>
</body>
</html>
vue里面的v-if/v-show很符合你的需求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 折叠（Collapse）插件方法</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
点击我进行展开，再次点击我进行折叠。第 1 部分--hide 方法
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
<div class="panel panel-success">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo">
点击我进行展开，再次点击我进行折叠。第 2 部分--show 方法
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseThree">
点击我进行展开，再次点击我进行折叠。第 3 部分--toggle 方法
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion"
href="#collapseFour">
点击我进行展开，再次点击我进行折叠。第 4 部分--options 方法
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred
nesciunt sapiente ea proident. Ad vegan excepteur butcher vice
lomo.
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () { $('#collapseFour').collapse({
toggle: false
})});
$(function () { $('#collapseTwo').collapse('show')});
$(function () { $('#collapseThree').collapse('toggle')});
$(function () { $('#collapseOne').collapse('hide')});
</script>
</body>
</html>
