Javascript 如何有效地多次使用切换按钮？_Javascript_Css_Toggle

Javascript 如何有效地多次使用切换按钮？

javascript css

Javascript 如何有效地多次使用切换按钮？,javascript,css,toggle,Javascript,Css,Toggle,我有下面的页面，它的行为正是我想要的但是，我知道可以通过两种方式更有效地编写页面：首先也是最重要的一点，我在重复一个javascript函数。这是指当单击特定按钮时，应该扩展哪个文本，但我知道这两个文本可以写成一个，因为它们共享相同类型的功能其次，css是笨拙的。我用了！重要信息用于覆盖显示还是隐藏文本有人能推荐这一页最雄辩的表演吗谢谢大家! <!DOCTYPE html> <html> <head> <meta name="viewport"

我有下面的页面，它的行为正是我想要的

但是，我知道可以通过两种方式更有效地编写页面：

首先也是最重要的一点，我在重复一个javascript函数。这是指当单击特定按钮时，应该扩展哪个文本，但我知道这两个文本可以写成一个，因为它们共享相同类型的功能

其次，css是笨拙的。我用了

！重要信息

用于覆盖显示还是隐藏文本

有人能推荐这一页最雄辩的表演吗

谢谢大家!

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.expand-button {
    background-color: #1860ac;
    color: white;
    border-radius: 5px;
    height: 30px;
    margin: 15px auto 40px auto;
    display: block;
    font-family: 'Cabin', sans-serif;
    font-size: 1em;
}
.hidden {
    display: none;
}
.very-hidden {
    display: none!important;
}
.mystyle {
    display: block!important;
}
</style>
</head>
<body>
<h2>
    First Paragraph
</h2> 
<button class="expand-button" id="b1" onclick="expand1()">Read more</button>
<span class="hidden" id="myDIV1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu magna vitae ipsum dignissim euismod. Curabitur egestas congue elit vitae accumsan. Integer aliquet dictum est, vitae placerat arcu dapibus commodo. Quisque nec libero sed urna tristique mattis sed vel lacus. Praesent ut justo eget elit mattis suscipit. Curabitur ut libero eros. Morbi nec viverra velit. Suspendisse at nulla quis purus luctus laoreet. Nunc euismod ultricies quam vitae mattis. Fusce auctor urna at libero dapibus, sed sollicitudin ex facilisis. Maecenas ultricies nisl sodales lectus ultricies volutpat. Sed pretium turpis vitae dui tincidunt, ac sagittis ante efficitur.</p>
</span>
<h2>
Second Paragraph
</h2>
<button class="expand-button" id="b2" onclick="expand2()">Read more</button>
<span class="hidden" id="myDIV2">
<p>Nunc porttitor, quam vel consectetur feugiat, ipsum justo accumsan urna, non egestas ante ipsum in tellus. Maecenas pretium, velit dictum ultricies convallis, neque justo aliquet dolor, sed tincidunt massa ipsum at justo. Integer auctor auctor pretium. Ut in lacus ex. Suspendisse id placerat sapien, sed placerat dui. Curabitur eget malesuada arcu. Nam fringilla imperdiet mauris, at malesuada dolor tempor sit amet. Nam feugiat mi vel accumsan tristique. Curabitur imperdiet mollis mi vel consequat. Nam sollicitudin, elit sit amet tincidunt consectetur, sapien elit blandit lorem, at semper ipsum enim eget eros. Cras in ultrices dolor. Maecenas a lacus risus. Duis sed leo id est ultricies rhoncus ac sed ex. Fusce commodo consectetur nunc, sed lacinia sem.
</p>
</span>
<script type="text/javascript">
function expand1() {
   var element = document.getElementById("myDIV1");
   element.classList.toggle("mystyle");
   var element = document.getElementById("b1");
   element.classList.toggle("very-hidden");
}
function expand2() {
   var element = document.getElementById("myDIV2");
   element.classList.toggle("mystyle");
    var element = document.getElementById("b2");
   element.classList.toggle("very-hidden");
}
</script>
</body>


.展开按钮{
背景色：1860ac；
颜色：白色；
边界半径：5px；
高度：30px；
保证金：15px自动40px自动；
显示：块；
字体系列：“CAB”，无衬线；
字号：1em；
}
.隐藏{
显示：无；
}
.非常隐蔽{
显示：无！重要；
}
mystyle先生{
显示：块！重要；
}
第一段
阅读更多
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是欧盟的尊严。库拉比图·埃吉斯塔斯·康格精英酒店。这是一个完整的名字，是一个重要的地方。自由主义者的权利被剥夺了。这是我们的精英马蒂斯·苏西比特。库拉比图自由女神。Morbi nec viverra velit。纳拉·奎斯·普鲁斯·卢库斯·劳里特的悬念。努克·尤伊斯莫德·尤里西斯·奎姆·马蒂斯（Nunc euismod ultricies quam vitae mattis）。libero dapibus的Fusce auctor urna，在设施外使用sollicitudin。ultricies nisl sodales lectus ultricies Volumpat。这是一种非常有效的治疗方法
第二段
阅读更多
努克·波特托尔（Nunc porttitor）、福吉亚（quam vel Concertetur feugiat）、厄尔纳（accumsan urna）和泰勒斯（tellus）的非埃古斯塔（non-egestas）等。前总统，后总统，内克·贾斯托·阿利克特·多洛，他在贾斯托的演讲中提到了共同点。整数拍卖人拍卖人。Ut在lacus ex.Suspendisse id placerat sapien，sed placerat dui。库拉比图尔·埃吉特·马莱苏亚达·阿库。malesuada dolor Temporal sit amet的Nam fringilla mauris。不，我是一个农民。莫利斯·米韦尔康塞卡特博物馆（Curabitur imperdiet mollis mi vel consequat）。Nam sollicitudin，Elite sit amet tincidunt Concertetur，sapien Elite blandit lorem，在semper ipsum enim eget eros。乌尔特里斯多洛的克拉斯。梅塞纳是一个缺陷。这是一种特殊情况，例如，它是一种特殊情况。

函数expand1（）{
var元素=document.getElementById（“myDIV1”）；
element.classList.toggle（“mystyle”）；
var元素=document.getElementById（“b1”）；
element.classList.toggle（“非常隐藏”）；
}
函数expand2（）{
var元素=document.getElementById（“myDIV2”）；
element.classList.toggle（“mystyle”）；
var元素=document.getElementById（“b2”）；
element.classList.toggle（“非常隐藏”）；
}

试试这个：

使用相同的

类

隐藏元素，并使用相同的函数传递带有正在单击的

div

编号的变量，这样您就可以创建

按钮

和

div

的

id

名称

函数展开（编号）{
变量id='myDIV'+编号
var divElement=document.getElementById（id）；
divElement.classList.toggle（“mystyle”）；
变量idButton='b'+数字
var按钮=document.getElementById（idButton）；
按钮。类列表。切换（“隐藏”）；
}

。展开按钮{
背景色：1860ac；
颜色：白色；
边界半径：5px；
高度：30px；
保证金：15px自动40px自动；
显示：块；
字体系列：“CAB”，无衬线；
字号：1em；
}
.隐藏{
显示：无；
}
mystyle先生{
显示：块；
}


第一段
阅读更多
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是欧盟的尊严。库拉比图·埃吉斯塔斯·康格精英酒店。这是一个完整的名字，是一个重要的地方。自由主义者的权利被剥夺了。这是我们的精英马蒂斯·苏西比特。库拉比图自由女神。Morbi nec viverra velit。纳拉·奎斯·普鲁斯·卢库斯·劳里特的悬念。努克·尤伊斯莫德·尤里西斯·奎姆·马蒂斯（Nunc euismod ultricies quam vitae mattis）。libero dapibus的Fusce auctor urna，在设施外使用sollicitudin。ultricies nisl sodales lectus ultricies Volumpat。这是一种非常有效的治疗方法
第二段
阅读更多
努克·波特托尔（Nunc porttitor）、福吉亚（quam vel Concertetur feugiat）、厄尔纳（accumsan urna）和泰勒斯（tellus）的非埃古斯塔（non-egestas）等。前总统，后总统，内克·贾斯托·阿利克特·多洛，他在贾斯托的演讲中提到了共同点。整数拍卖人拍卖人。Ut在lacus ex.Suspendisse id placerat sapien，sed placerat dui。库拉比图尔·埃吉特·马莱苏亚达·阿库。malesuada dolor Temporal sit amet的Nam fringilla mauris。不，我是一个农民。莫利斯·米韦尔康塞卡特博物馆（Curabitur imperdiet mollis mi vel consequat）。Nam sollicitudin，Elite sit amet tincidunt Concertetur，sapien Elite blandit lorem，在semper ipsum enim eget eros。乌尔特里斯多洛的克拉斯。梅塞纳是一个缺陷。这是一种特殊情况，例如，它是一种特殊情况。