如何有效地多次使用切换按钮？
如何有效地多次使用切换按钮？
提问于 2018-04-17 06:53:25
我有下面的页面，它完全按照我想要的方式运行。
然而，我知道可以通过两种方式更有效地编写页面：
首先，也是最重要的，我重复了一个
- 函数。这表示当点击特定的按钮时，哪个文本应该被展开，但是我知道这两个可以写成一个，因为它们共享相同类型的functionality.
- Second，。我使用了
!important来覆盖文本是显示还是隐藏。
有人能推荐一下这个页面最有说服力的版本吗？
谢谢!
<!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>回答 1
Stack Overflow用户
发布于 2018-04-17 07:11:29
试试这个：
使用相同的class隐藏元素，并使用相同的函数传递带有您所单击的div编号的变量，这样就可以构建button和div的id名称。
function expand(number) {
var id = 'myDIV'+ number
var divElement = document.getElementById(id);
divElement.classList.toggle("mystyle");
var idButton = 'b'+ number
var button = document.getElementById(idButton);
button.classList.toggle("hidden");
}.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;
}
.mystyle {
display: block;
}<body>
<h2>
First Paragraph
</h2>
<button class="expand-button" id="b1" onclick="expand('1')">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="expand('2')">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>
</body>
希望这能对您有所帮助:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49867401
复制相关文章
相似问题