[英]DIV element inside of LI
I have a problem showing a list with hidden divs. 我在显示带有隐藏div的列表时遇到问题。 I use the toggleSlide()
function from jQuery to show/hide the DIV elements whenever you click the LI element. 每当您单击LI元素时,我都会使用jQuery中的toggleSlide()
函数来显示/隐藏DIV元素。
The problem comes when the DIV comes visible, as it gets over the rest of the elements instead of making a space between list elements to print it there. 当DIV变得可见时,问题就来了,因为它遍历了其余元素,而不是在列表元素之间留出一个空格以在此处打印出来。
Currently, this is the code I have: 目前,这是我的代码:
elementList.append('<li class="element" onclick="toggleDetails(this);"><span class="elementName">' + elementsArray[i]["descMarca"] + ' ' + elementsArray[i]["descModelo"] + '</span>'
+ '<div class="elementDetails hidden"><label for="marca">Marca:</label><span>' + elementsArray[i]["descMarca"] + '</span>'
+ '<label for="modelo">Modelo:</label><span id="modelo">' + elementsArray[i]["descModelo"] + '</span>'
+ '<label for="serialN">Licencia:</label><span id="serialN">' + elementsArray[i]["serialN"] + '</span>'
+ '<label for="productN">Número de producto:</label><span id="productN">' + elementsArray[i]["productN"] + '</span>'
+ '<label for="fecAlta">Fecha de alta:</label><span id="fecAlta">' + fecAlta + '</span>'
+ '<label for="fecRenov">Fecha de renovación:</label><span id="fecRenov">' + fecRenov + '</span></div></li>');
elementList.css('display', 'block');
Being the required CSS this one: 作为必需的CSS,这是一个:
.element {
height: 5vh;
line-height: 5vh;
padding-left: 20px;
vertical-align: center;
cursor: pointer;
}
.elementDetails {
width: 50%;
margin-left: 25%;
}
If I set display: inline;
如果我设置display: inline;
on the LI element, it works as intended. 在LI元素上,它按预期工作。 The issue comes when I want a vertical list, so it can't be done setting display: inline;
当我想要一个垂直列表时,问题就来了,所以无法设置display: inline;
property to each LI element. 每个LI元素的属性。
Thanks in advance. 提前致谢。
You need to set display: block;
您需要设置display: block;
(instead of display: inline;
) to the li
element (而不是display: inline;
)到li
元素
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.