jquery实现简易手风琴
html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link rel="stylesheet" href="./index.css">
<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 src="./index.js">
</script>
</body>
</html>、
js部分
$("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();
})
css部分
span {
text-align: center;
line-height: 40px;
background-color: tomato;
color: thistle;
}
p {
display: none;
height: 300px;
display: "inline-block",
}
section {
margin: auto;
}
浙公网安备 33010602011771号