我正在学习一个教程，看来要么是我弄错了，要么是教程中的代码有问题。
无论哪种方式，我都用 HTML/CSS/JS 代码创建了一个 fiddle 。我试图实现当单击按钮(在代码中它是 anchor 标记)时 #content div 延长其长度。
当我运行代码时，我可以超快速地切换 div，但几毫秒后它会返回到默认位置。
这是 fiddle 链接: https://jsfiddle.net/zengkuvc/
下面是 HTML 代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="ninjaPractice.css">
<title>Document</title>
</head>
<body>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Porttitor lacus luctus accumsan tortor. Egestas tellus rutrum tellus pellentesque eu tincidunt tortor. Sit amet consectetur adipiscing elit. Diam ut venenatis tellus in metus vulputate eu. Fermentum dui faucibus in ornare quam viverra. Vitae et leo duis ut diam quam nulla porttitor. Et egestas quis ipsum suspendisse ultrices gravida dictum fusce ut. Eu tincidunt tortor aliquam nulla facilisi cras fermentum odio. Nulla aliquet porttitor lacus luctus. Mattis molestie a iaculis at erat pellentesque adipiscing commodo elit. Urna porttitor rhoncus dolor purus non. Diam sit amet nisl suscipit. Arcu dui vivamus arcu felis bibendum ut tristique et. Ipsum suspendisse ultrices gravida dictum. Lacus sed turpis tincidunt id aliquet risus feugiat in. Vulputate eu scelerisque felis imperdiet. Adipiscing enim eu turpis egestas pretium aenean pharetra magna.Eget nulla facilisi etiam dignissim diam quis enim lobortis scelerisque. Vulputate sapien nec sagittis aliquam malesuada. Amet aliquam id diam maecenas. Aliquam ut porttitor leo a diam sollicitudin. Vestibulum lorem sed risus ultricies tristique. Sit amet risus nullam eget. Velit sed ullamcorper morbi tincidunt ornare massa eget. Hendrerit dolor magna eget est lorem ipsum. Molestie a iaculis at erat pellentesque. Nunc faucibus a pellentesque sit amet porttitor eget dolor morbi. Gravida arcu ac tortor dignissim convallis aenean et tortor. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Imperdiet dui accumsan sit amet nulla facilisi morbi tempus iaculis. Donec adipiscing tristique risus nec feugiat in fermentum posuere urna. At quis risus sed vulputate odio ut enim blandit.Neque ornare aenean euismod elementum nisi. Lobortis mattis aliquam faucibus purus in. Cursus eget nunc scelerisque viverra. Elit eget gravida cum sociis natoque penatibus et magnis. Quis lectus nulla at volutpat diam ut. Ultrices tincidunt arcu non sodales neque sodales ut. Nec ullamcorper sit amet risus nullam eget felis. Sit amet dictum sit amet justo donec enim diam. Suspendisse in est ante in nibh. Amet consectetur adipiscing elit duis tristique sollicitudin nibh. Pretium vulputate sapien nec sagittis aliquam malesuada.
Elit pellentesque habitant morbi tristique senectus et netus et. Augue eget arcu dictum varius duis at consectetur. Blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. In fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Nibh ipsum consequat nisl vel pretium lectus quam id. Nisl condimentum id venenatis a condimentum vitae. Integer quis auctor elit sed vulputate. Ac turpis egestas maecenas pharetra convallis posuere morbi leo. Nulla porttitor massa id neque. Diam vulputate ut pharetra sit. Donec massa sapien faucibus et molestie. Eu lobortis elementum nibh tellus molestie nunc non blandit massa. Ac felis donec et odio. Aliquam sem et tortor consequat id porta. Habitant morbi tristique senectus et netus et malesuada. Proin fermentum leo vel orci porta. Non sodales neque sodales ut etiam sit amet. Sed augue lacus viverra vitae congue eu consequat. Ut tellus elementum sagittis vitae et leo duis ut diam. Tortor at risus viverra adipiscing at in tellus integer.
Pulvinar proin gravida hendrerit lectus. Blandit libero volutpat sed cras ornare arcu. Quis auctor elit sed vulputate mi sit amet mauris commodo. Vitae et leo duis ut diam. Sed id semper risus in hendrerit gravida rutrum quisque. Mi ipsum faucibus vitae aliquet nec ullamcorper sit. Scelerisque felis imperdiet proin fermentum leo vel orci porta. Consectetur adipiscing elit ut aliquam purus. At lectus urna duis convallis convallis tellus id interdum. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Et netus et malesuada fames. Congue nisi vitae suscipit tellus mauris a diam maecenas. Nibh sed pulvinar proin gravida hendrerit. Vitae et leo duis ut. Aliquam id diam maecenas ultricies mi. Tellus orci ac auctor augue mauris augue. Id faucibus nisl tincidunt eget nullam non nisi est. Nunc consequat interdum varius sit amet mattis.</div>
<a id="show-more" href="">Show more</a>
<script src="ninjaPractice.js"></script>
</body>
</html>
最佳答案
只需传递 event 作为参数，并在 onclick 函数中添加 event.preventDefault()
button.onclick = function(event) {
event.preventDefault();
if (content.className == "open") {
//shrink the box
content.className = "";
button.innerHTML = "Show More";
} else {
//expand the box
content.className = "open";
button.innerHTML = "Show Less";
}
}
更新了 fiddle https://jsfiddle.net/zengkuvc/1/
关于javascript - JS切换不扩展div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53363026/