LI 内部的 DIV 元素
DIV element inside of LI
我在显示带有隐藏div 的列表时遇到问题。我使用 jQuery 中的 toggleSlide()
函数在单击 LI 元素时显示/隐藏 DIV 元素。
当 DIV 可见时,问题就来了,因为它覆盖了其余元素,而不是在列表元素之间留出一个空格来打印它。
目前,这是我拥有的代码:
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');
作为必需的CSS,这个:
.element {
height: 5vh;
line-height: 5vh;
padding-left: 20px;
vertical-align: center;
cursor: pointer;
}
.elementDetails {
width: 50%;
margin-left: 25%;
}
如果我在 LI 元素上设置display: inline;
,它会按预期工作。当我想要一个垂直列表时,问题就来了,所以无法完成为每个 LI 元素设置display: inline;
属性。
提前谢谢。
您需要
将display: block;
(而不是display: inline;
)设置为li
元素
相关文章:
- 如何在不影响其他元素的情况下扩展DIV
- DIV怎么能像Javascript中的另一个元素一样工作呢
- 循环对象时更新页面上的DIV元素
- 在DIV中动态插入HTML并访问新元素
- 单击javascript按钮显示/隐藏Div元素
- 如何确定滚动DIV中的可见DOM元素
- 范围和列表元素在 DIV 中换行
- Javascript 在提交时禁用 Div 元素
- 在 AJAX 调用中发送 DIV 元素的 ID
- 在具有特定ID的DIV中使用JavaScript动态添加HTML元素
- 使用JavaScript函数添加多个DIV元素
- 如果在Div元素外部单击,请关闭该元素
- 使用jQuery将列表中的元素集封装在DIV中
- 如何使用CSS3/JavaScript缩放DIV元素及其子元素以适应父元素
- 如何将SVG元素和Div放入图像中,以便用户可以下载
- 将DIV元素绑定到溢出滚动条
- 如何切换DIV元素的可见性
- jQuery - 将元素拖入 DIV / 或可排序元素
- Div在浏览器的检查元素中很暗,无法检索内容
- JavaScript/jQuery:如何获得元素(DIV)旋转后的实际原始位置