Question

我有以下页面，其行为正是我想要的。

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

首先也是最重要的是，我正在重复一个javascript函数。这是为了表示在单击其特定按钮时应该展开哪些文本，但我知道这两个文本可以写成一个，因为它们共享相同类型的功能。
其次，css很笨拙。我已使用!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>

Answer 1

试试这个：

使用相同的class来隐藏元素，并使用相同的函数传递一个变量，其中包含您要点击的div的数量，这样您就可以构建{{1} } id和button的名称。

＆＃13;

div

＆＃13;

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");
}

＆＃13;

.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;
}

＆＃13;

希望这可以帮助你：）

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

1 个答案: