Выпадающий список (элемент после элемента) по клику

Question

У меня есть строка текста со списком под ней. Я хотел бы щелкнуть по тексту, и список опустится - в частности, один элемент за другим в быстрой последовательности, чтобы дать приятный плавный эффект. Надеюсь, это ясно. Каков наилучший способ достичь этого? Код ниже. Благодарю.

Примечание: на данный момент знаний javascript/jquery практически нет. Извиняюсь.

HTML:

<p class="facilities" style="color:#009ee3" id="perth-features">Key features</p>   
    <ul class="facilities" id="perth-list"> 
    <li>15,000m² heavy duty concrete hardstand open storage</li> 
    <li>1,900m² heavy duty concrete undercover canopy area</li> 
    <li>5,550m² high truss warehouse space</li> 
    <li>1,600m² maintenance facility</li> 
    <li>45,000 Litre self bunded diesel fuelling station</li> 
    <li>700m² Spare parts area for fleet &amp; rental spares</li> 
    <li>460m² segregated undercover</li> 
    <li>90m² truck wash bay facility with oil separation system</li> 
    <li>Onsite lifting to 16tonne</li> 
    </ul> 
</p> 

CSS

#perth-list { 
    display: none; 
} 

Answer 1

Использование JQuery вы можете сделать что-то вдоль этих линий:

var speed = 100 
 

 
$("#perth-features").click(function() { 
 
    var canAnimate = true; 
 
    $("ul#perth-list li").each(function(index) { 
 
    if ($(this).is(":animated")) 
 
     return canAnimate = false; 
 
    }); 
 

 
    if (canAnimate) 
 
    $("ul#perth-list li").each(function(index) { 
 
     if (!$(this).is(":visible")) 
 
     $(this).delay(speed * index).slideDown(speed); 
 
     else 
 
     $(this).delay(speed * ($("ul#perth-list li").length - index)).slideUp(speed); 
 
    }); 
 
});

ul#perth-list li { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="facilities" style="color:#009ee3" id="perth-features">Key features</p> 
 
<ul class="facilities" id="perth-list"> 
 
    <li>15,000m² heavy duty concrete hardstand open storage</li> 
 
    <li>1,900m² heavy duty concrete undercover canopy area</li> 
 
    <li>5,550m² high truss warehouse space</li> 
 
    <li>1,600m² maintenance facility</li> 
 
    <li>45,000 Litre self bunded diesel fuelling station</li> 
 
    <li>700m² Spare parts area for fleet &amp; rental spares</li> 
 
    <li>460m² segregated undercover</li> 
 
    <li>90m² truck wash bay facility with oil separation system</li> 
 
    <li>Onsite lifting to 16tonne</li> 
 
</ul>

$("#perth-features").click(func.... когда элемент с идентификатором Перта функций щелкают ...

$("ul#perth-list li").each(function(index) для каждого из элементов в списке - с использованием индекса в качестве ... В параметре

$(this).delay(400 * index).fadeIn(300); Проявления каждого элемента в список с постепенным замедлением замирания.

Answer 2

Если вы предпочитаете придерживаться только HTML:

Для выпадающего списка в HTML можно использовать тег <select>. Обычно это используется, когда пользователю предлагается выбрать опцию из списка. Но, я думаю, вы все равно можете использовать этот метод только для показа в вашем случае.

http://www.w3schools.com/tags/tag_select.asp

Ваша первая строка текста будет идти в первый вариант тега.

Вместо <li> метки используют <option>

<select> 
    <li>15,000m² heavy duty concrete hardstand open storage</li> 
    <li>1,900m² heavy duty concrete undercover canopy area</li> 
    <li>5,550m² high truss warehouse space</li> 
    <li>1,600m² maintenance facility</li> 
    <li>45,000 Litre self bunded diesel fuelling station</li> 
    <li>700m² Spare parts area for fleet &amp; rental spares</li> 
    <li>460m² segregated undercover</li> 
    <li>90m² truck wash bay facility with oil separation system</li> 
    <li>Onsite lifting to 16tonne</li> 
</select>