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);使用增量淡入淡出延迟淡入列表中的每个项目。

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>

点击下拉列表（项目后面的项目）

2 个答案: