#javascript #html #css
#javascript #HTML #css
Вопрос:
Я пытаюсь создать div, который при нажатии на который увеличивается не только по высоте (как сейчас), но и по ширине.
Например, если у меня есть несколько строк, в каждой строке по 3 свернутых раздела, как только я нажимаю на любой, он расширяется до ширины всей строки (таким образом, равной 3 свернутым разделам), а высота зависит от объема свернутых данных (представьте, что это статья, а свернутый раздел — это миниатюра статьи, и при нажатии на нее он расширяется и показывает всю статью / текст).
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i ) {
coll[i].addEventListener("click", function() {
this.classList.toggle("aktualno");
var content = this.nextElementSibling;
if (content.style.maxHeight) {
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight "px";
}
});
}
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
for (i = 0; i < x.length; i ) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i ) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className = " " arr2[i];
}
}
}
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i ) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
} .content {
padding: 0 18px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: white;
}
.filterDiv {
float: left;
background-color: white;
color: black;
width: 100px;
line-height: 100px;
text-align: center;
margin: 5px;
display: none;
border: 1px solid black;
}
.show {
display: block;
}
.container {
margin-top: 20px;
overflow: hidden;
} <div class="filterDiv Pilar1">
<div class="articleBox">
<button class="collapsible">A</button>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="filterDiv Pilar2 Pilar4">
<div class="articleBox">
<button class="collapsible">B</button>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="filterDiv Pilar1">
<div class="articleBox">
<button class="collapsible">C</button>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div> Я застрял, пожалуйста, помогите
Комментарии:
1. Возможно, при нажатии на одно из них вы можете установить ширину двух других блоков равной 0% и ширину выбранного блока равной 100%.
2. Обязательно ли использовать этот явный макет? Или вы можете свободно использовать другую комбинацию HTML / CSS / JS? Я бы сделал это намного, намного, намного проще! Если вы хотите, чтобы я показал вам, не стесняйтесь оставлять комментарий. В противном случае (если вам нужно или вы хотите сохранить тот же точный макет), было бы пустой тратой времени для меня показывать вам.
Ответ №1:
Если я правильно понимаю, что вы ищете, вы могли бы немного изменить свой JavaScript, чтобы обновить ширину:
for (i = 0; i < coll.length; i ) {
coll[i].addEventListener("click", function() {
this.classList.toggle("aktualno");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
content.parentElement.parentElement.style.width = "100px";
} else {
content.style.maxHeight = content.scrollHeight "px";
content.parentElement.parentElement.style.width = "100%";
}
});
}
Для этого выбирается div, содержащий содержимое, например: <div class="filterDiv Pilar1"> , и устанавливается ширина в 100%, если она расширяется, и устанавливается в 100 пикселей, если она уменьшается.
Комментарии:
1. Да! Вот и все! Оооочень большое вам спасибо, я потратил два часа, возясь с CSS, думая, что решение есть… Я думаю, пришло время начать изучать JS должным образом. Еще раз спасибо, я считаю, что это был очень простой вопрос.