jquery - 单击下拉列表(元素后元素)

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.... 当点击id为perth-features的元素时...

$("ul#perth-list li").each(function(index) 用于列表中的每个元素 - 使用索引作为参数...

$(this).delay(400 * index).fadeIn(300); 使用增量淡入淡出延迟淡入列表中的每个元素。