Question

我在显示隐藏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;属性。

提前致谢。

Answer 1

您需要将display: block;（而不是display: inline;）设置为li元素

LI里面的DIV元素

1 个答案: