Элемент DIV внутри LI

Question

У меня проблема с отображением списка со скрытыми div. Я использую функцию toggleSlide() из jQuery, чтобы показать/скрыть элементы DIV всякий раз, когда вы нажимаете элемент LI.

Проблема возникает, когда 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%; 
} 

Если установить display: inline; на элемент LI, он работает, как задумано. Проблема возникает, когда мне нужен вертикальный список, поэтому не может быть установлено значение свойства display: inline; для каждого элемента LI.

Заранее спасибо.

Answer 1

Вам нужно установить display: block; (вместо display: inline;) к li элементу