Fatal编程技术网
  • javascript/
  • Javascript JS切换不'；t扩展div

Javascript JS切换不'；t扩展div

javascript

Javascript JS切换不'；t扩展div,javascript,toggle,Javascript,Toggle,我在遵循一个教程，似乎要么我有什么地方出错了，要么图坦卡蒙的代码有问题 不管是哪种方式，我都对HTML/CSS/JS代码进行了修改。我试图实现当点击按钮（在代码中是锚定标记）时，#content div会扩展其长度 当我运行代码时，我可以超快速地切换div，但是几毫秒后它会回到默认位置 以下是小提琴链接： 下面是HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

我在遵循一个教程，似乎要么我有什么地方出错了，要么图坦卡蒙的代码有问题

不管是哪种方式，我都对HTML/CSS/JS代码进行了修改。我试图实现当点击按钮（在代码中是锚定标记）时，#content div会扩展其长度

当我运行代码时，我可以超快速地切换div，但是几毫秒后它会回到默认位置

以下是小提琴链接：

下面是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>


文件
知识是一种美德，是一种美德，是一种美德，是一种美德。门体陷窝，门体陷窝，门体陷窝，门体陷窝，门体陷窝，门体陷窝。这是一个很好的例子。坐在阿梅特·康塞特图·阿迪皮斯的位子上。位于欧洲大陆的威尼斯人的直径。奥纳维韦拉码头的发酵酒后酒。生命和利奥都是不可能的。这是一个关于同侧暂停妊娠期疾病的说法。Eu tincidunt tortor aliquam nulla facilisi cras ference um odio。无肝门。马蒂斯·莫莱斯蒂是埃拉特·佩伦茨克百货公司的一名艾库利斯，他正在向精英百货公司进发。乌尔纳·波特提托·朗库斯·多洛·普鲁斯·农。直径为1毫米。生命之弧对胎儿之弧对胎儿之弧的影响。有缺陷的turpis tincidunt是一种封建制度。匈牙利的猫科动物节杖。在大药剂师面前的欧盟turpis egestas。Eget nulla facilisi eim dimen quis enim lobortis scelerisque。马来苏亚种。阿梅特·阿利奎姆·迪亚姆·梅塞纳斯。利奥是一个勇敢的人。内耳前庭。坐在阿梅特·里苏斯·努勒姆·埃吉特的座位上。这是一个非常好的例子。亨德雷特·多洛尔·麦格纳·埃吉特是一位知识渊博的女性。在埃拉特·佩伦茨克的一个教堂里有一个小教堂。努克·福西布斯是一个佩伦特式的人，坐在埃米特·波特或埃吉特·多尔或莫尔比旁边。孕妇是一名重要的侵权人。Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan。在死亡的过程中，我们需要一个简单的方法来治疗疾病。不要在posuere urna发酵液中添加不需要发酵的三重发酵液。在这一天，我们的目标是实现一个美好的愿望。我们的目标是实现一个美好的未来。罗博蒂斯·马蒂斯·阿利奎姆·福西布斯·普鲁斯。维韦拉的权杖。优秀的孕妇和社会工作者。在蜗壳直径处，没有任何选择。Ultrices tincidunt arcu non sodales neque sodales ut。Nec ullamcorper坐在猫咪面前。这是我的座右铭。在nibh的最早赌注是暂停。阿梅特·康塞特图尔·阿迪皮斯是一位杰出的企业家。无公害前智人。
精英居住者morbi tristique Sentecus et netus et Augue eget arcu dictum varius duis在Concertetur。文质彬彬，文质彬彬，文质彬彬。在发酵液和溶剂中，以芦丁为原料。Nibh ipsum consequat nisl vel pretium lectus quam id。nisl调味品id venenatis是一种生命调味品。整数quis拍卖人elit sed vulputate。Ac turpis egestas maecenas pharetra convallis posuere morbi leo。马萨·艾德·内克·努拉·波特提托。直径和直径。Donec massa sapien faucibus et molestie。这是一种非温和的物质。Ac felis donec和odio。这是一个很好的例子。居住者morbi tristique Sentecus et netus et malesuada。利奥维尔奥奇波尔塔发酵素。非苏打水不包括苏打水。这是一种生活方式。这是指矢状面和狮子座的两个直径。维韦拉之星的托托人与泰勒斯之星的托托人是同一个整数。
妊娠期枕前动脉。温文尔雅的自由主义者们被认为是愚蠢的。拍卖行的精英们把我放在艾米特·莫里斯·康莫多的位子上。生命和狮子座都是直径。在亨德雷特的孕妇rutrum quisque中有一种特殊的感觉。我的ipsum faucibus vitae ALIQUT nec ullamcorper sit。猫科动物节杖在发酵液中的应用。献身于和平的精英们。在莱克托斯乌尔纳，两人在一起。朗卡斯·埃尼安（Rhoncus aenean）时代的精英权杖莫里斯·佩伦茨克（mauris Pelletsque）是佩伦茨克（pulvinar Pelletsque）的居民。这是一个著名的故事。生命之源是一颗钻石。尼布在孕妇亨德雷特身上使用了枕动脉。维塔和利奥都是酒鬼。不等长的直径和其他的直径。奥古斯·莫里斯·奥古斯。我不知道这是怎么回事。这是一个很好的例子。
只需将
事件作为参数传递，并在onclick函数中添加
事件.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";
  }
}



更新的小提琴
哇，是的，这很有效。我刚刚核实了解释。基本上preventDefault（）禁止浏览器“进入另一个网页”。（在本例中不存在）并按预期执行代码。这个解释正确吗？然而，我很好奇，这将在指导教程的人的机器上工作，而不是在我的机器上。？可能是因为他在使用xampp或类似的工具。实际上，
preventDefault
会停止浏览器的默认操作。