Я хотел бы использовать код, как показано ниже, в моих проектах, у меня есть 6 списков объектов, чтобы скрыть и показать, нужно ли мне определить 6 идентификаторов блоков? (Я хотел бы контролировать эти 6 идентификаторов с помощью Hide и Show функция) И содержание коробки в демоверсии "Некоторые тексты. Некоторые тексты. Некоторые тексты". все в for loop, можно ли отобразить полное текстовое поле этого for loop? Потому что текст слишком длинный, и они исчезнут с экрана.
Кроме того, можно ли установить Hide на значение по умолчанию, код, приведенный ниже, будет отображать содержимое for loop независимо от того, что я изменил.
<!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">
<title>Document</title>
<style>
.box p {
width: 360px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.box p:hover {
overflow: visible;
}
</style>
</head>
<body>
<button id="statusChange">Show</button>
<div class="box" id="box">
<p>1、Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. </p>
<p>2、Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts.</p>
<p>3、Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts.</p>
<p>4、Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts. Some texts.</p>
<p>5、......</p>
</div>
<script>
document.getElementById('statusChange').onclick = function() {
var text = this.innerText
if (text == 'Hide') {
document.getElementById('box').style.cssText = 'display:none'
this.innerText = 'Show'
} else if (text == 'Show') {
document.getElementById('box').style.cssText = 'display:block'
this.innerText = 'Hide'
}
}
</script>
</body>
</html>