Javascript 阅读更多折叠脚本更改_Javascript_Html_Css

Javascript 阅读更多折叠脚本更改

javascript html css

Javascript 阅读更多折叠脚本更改,javascript,html,css,Javascript,Html,Css,我希望能够为自己的部分折叠每个“阅读更多”。该代码是从w3schools借来的，并试图通过添加第二节来修改。但第二个按钮会展开第一个文本。我理解（通过阅读其他部分）我必须修改元素的id，以便每个部分都是独立的。我需要什么来修改此行为？这对我来说是一个新的领域，温柔点 <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #more {display

我希望能够为自己的部分折叠每个“阅读更多”。该代码是从w3schools借来的，并试图通过添加第二节来修改。但第二个按钮会展开第一个文本。我理解（通过阅读其他部分）我必须修改元素的id，以便每个部分都是独立的。我需要什么来修改此行为？这对我来说是一个新的领域，温柔点

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>

<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>

<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>

<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
</script>

</body>
</html>


#更多{显示：无；}
一个
Lorem ipsum dolor sit amet，是一位杰出的献身者。不可抗拒的饮食、不可抗拒的饮食、不可抗拒的生活……不可忍受的痛苦。梅塞纳斯·尼尔斯·埃斯特、尤特丽斯·内克·康格·埃吉特、维塔·马萨拍卖行。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。在自由女神维尼那提斯统治下的奥纳雷·图皮斯（ornare turpis）。不要因为怀孕而失去生命。不发酵整粒玉米粥。枕侧颞门
阅读更多
两个
Lorem ipsum dolor sit amet，是一位杰出的献身者。不可抗拒的饮食、不可抗拒的饮食、不可抗拒的生活……不可忍受的痛苦。梅塞纳斯·尼尔斯·埃斯特、尤特丽斯·内克·康格·埃吉特、维塔·马萨拍卖行。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。在自由女神维尼那提斯统治下的奥纳雷·图皮斯（ornare turpis）。不要因为怀孕而失去生命。不发酵整粒玉米粥。枕侧颞门
阅读更多
函数myFunction（）{
var dots=document.getElementById（“dots”）；
var moreText=document.getElementById（“更多”）；
var btnText=document.getElementById（“myBtn”）；
如果（dots.style.display==“无”）{
dots.style.display=“inline”；
btnText.innerHTML=“阅读更多”；
moreText.style.display=“无”；
}否则{
dots.style.display=“无”；
btnText.innerHTML=“少读”；
moreText.style.display=“inline”；
}
}

例如，您必须使用类更改所有ID，因为ID在页面中必须是唯一的

在这之后，一个解决方案是在2个div中插入2个文本，将

这个

元素传递到

myFunction

以选择要处理的正确框

函数myFunction（elmnt）{
var myID=elmnt.parentNode；
var dots=myID.getElementsByClassName（“dots”）[0]；
var moreText=myID.getElementsByClassName（“更多”）[0]；
var btnText=myID.getElementsByClassName（“myBtn”）[0]；
如果（dots.style.display==“无”）{
dots.style.display=“inline”；
btnText.innerHTML=“阅读更多”；
moreText.style.display=“无”；
}否则{
dots.style.display=“无”；
btnText.innerHTML=“少读”；
moreText.style.display=“inline”；
}
}

.more{display:none；}


一个
Lorem ipsum dolor sit amet，是一位杰出的献身者。不可抗拒的饮食、不可抗拒的饮食、不可抗拒的生活……不可忍受的痛苦。梅塞纳斯·尼尔斯·埃斯特、尤特丽斯·内克·康格·埃吉特、维塔·马萨拍卖行。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。在自由女神维尼那提斯统治下的奥纳雷·图皮斯（ornare turpis）。不要因为怀孕而失去生命。不发酵整粒玉米粥。枕侧颞门
阅读更多
两个
Lorem ipsum dolor sit amet，是一位杰出的献身者。不可抗拒的饮食、不可抗拒的饮食、不可抗拒的生活……不可忍受的痛苦。梅塞纳斯·尼尔斯·埃斯特、尤特丽斯·内克·康格·埃吉特、维塔·马萨拍卖行。前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭前庭。在自由女神维尼那提斯统治下的奥纳雷·图皮斯（ornare turpis）。不要因为怀孕而失去生命。不发酵整粒玉米粥。枕侧颞门
阅读更多

ID必须是唯一的。您能举个例子吗？谢谢你的回复。这个代码对我不起作用。我想再多解释一下。或者给我一些我可以剪切/粘贴的东西，这样我可以试着理解逻辑。我是新手，温柔一点……是的，我用了你的代码，但它不起作用。我使用id而不是类来手动绘制代码段和orig的DOM以进行比较。我在您的上看到了相同的类组id，但不确定它如何使用相同的id控制单独的操作。我有一个解决方法（不优雅）使其工作-我添加了diff id和第二个函数来控制按钮。关于您的代码，我不理解的是您使用了类来对它们进行分组，并在var定义的末尾添加了var myID和[0]。您能给出使用diff id和单个函数而不是类的示例吗？谢谢你。这是密码：我编辑了我的答案。我不知道怎样才能说得更清楚。我想这是因为我的英语不好。试着看看现在的答案对你来说是否更容易理解。：-）