用什么来创建这个列表？

Question

在附加的模型中有一个可折叠/可扩展的列表。我从来没有创建过这样的列表，有什么建议需要我这样做吗？ Html元素？ Javascript / ajax动画？

Answer 1

我刚刚创建了这样的东西，下面的剪辑可能对你有帮助......它只需要少量的jQuery，并且很容易组合在一起。

＆＃13;

＆＃13;

$(function() {
	$("#dedicated-table .dedi-product").hide();
	$(".showmore").on("click", function() {
	     $(".dedi-product:visible").slideUp();
             $(this).closest("tr").next("tr.toggle").find(".dedi-product:hidden").slideDown();
         });
});

＆＃13;

.dedi-table {
  table-layout: fixed;
}
tr:nth-of-type(even) {
  background: #aaa;
}
tr:nth-of-type(odd) {
  background: #eee;
}
.showmore {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="dedicated-table" class="wrapper">
  <table width="100%" border="1" cellspacing="0" cellpadding="0" class="dedi-table">
    <tr>
      <th scope="col">SERVER</th>
      <th scope="col">CPU</th>
      <th scope="col">SPEED</th>
      <th scope="col">RAM</th>
      <th scope="col">HDD</th>
      <th scope="col">DATA</th>
      <th scope="col">PRICE</th>
    </tr>
    <tr>
      <td colspan="7"></td>
    </tr>
    <tr>
      <td class="showmore" title="<h4>Show More Information</h4>">
        <h3>D1</h3> 
      </td>
      <td class="showmore">E3-1230</td>
      <td class="showmore">3.2 GHz</td>
      <td class="showmore">4GB DDR3</td>
      <td class="showmore">1TB SATA</td>
      <td class="showmore">2TB limit</td>
      <td>&pound;<sup>*</sup>
      </td>
    </tr>

    <tr class="toggle">
      <td colspan="7">
        <div class="dedi-product">

          <div class="details clearfix">
            <article>
              <p>D1 breaks new ground with its industry-leading price - it's a great way to dip your toe into the world of dedicated servers, and comes with a 1Gbps dedicated network port and 2TB bandwidth.</p>
            </article>
            <ul>
              <li><small>cpu</small> E3-1230</li>
              <li><small>Speed</small> 3.2 GHz</li>
              <li><small>Cores (Threads)</small> 4 (8)</li>
              <li><small>RAM</small> 4GB DDR3</li>
              <li><small>HDD</small> 1TB SATA</li>
              <li><small>Connectivity</small> 1Gbps</li>
              <li><small>Bandwidth</small> 2TB limit</li>
            </ul>
          </div>
          <!-- details -->

          <aside>
            <p class="price">&pound;
              <small>/month</small>
            </p>
            <p><small>(Ex VAT, charged at 20%)</small>
            </p>

            <p>BUY NOW
            </p>
          </aside>
        </div>
      </td>
    </tr>
    <tr>
      <td class="showmore tooltip" title="<h4>Show More Information</h4>">
        <span class="dedi-offer-flag">20% OFF</span>
        <h3>D2</h3> 
        <span class="fa-stack">
							  <i class="fa fa-circle-o fa-stack-2x"></i>
							  <i class="fa fa-info fa-stack-1x"></i>
							</span>
      </td>
      <td class="showmore">E3-1231v3</td>
      <td class="showmore">3.4 GHz</td>
      <td class="showmore">8GB DDR3</td>
      <td class="showmore">2 x 1TB SATA</td>
      <td class="showmore">10TB limit</td>
      <td><i class="fa fa-star tooltip tag-green" title="<h4>BEST SELLER</h4>"></i>
        <span class="price">&pound;<?php echo $plan_info['D2'][12]['price_per_month'] ?><small>/m</small><sup>*</sup></span> 
        <a href="#">BUY</a>
      </td>
    </tr>
    <tr class="toggle">
      <td colspan="7">
        <div class="dedi-product">

          <div class="details">
            <article>
              <p>D2 is ideal for hosting websites, business infrastructure and more. It features 10TB of bandwidth on our high-performance 1Gbps network, a brand new Intel Xeon CPU, 8GB RAM and 2TB of storage.</p>
            </article>
            <ul>
              <li><small>cpu</small> E3-1231v3</li>
              <li><small>Speed</small> 3.4 GHz</li>
              <li><small>Cores (Threads)</small> 4 (8)</li>
              <li><small>RAM</small> 8GB DDR3</li>
              <li><small>HDD</small> 2 x 1TB SATA</li>
              <li><small>Connectivity</small> 1Gbps</li>
              <li><small>Bandwidth</small> 10TB limit</li>
            </ul>
          </div>
          <!-- details -->

          <aside>
            <p class="price">&pound;
              <small>/month</small>
            </p>
            <p><small>(Ex VAT, charged at 20%)</small>
            </p>

            <p>BUY NOW
            </p>
          </aside>
        </div>
      </td>
    </tr>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

看起来你已经嘲笑了一种叫做手风琴的东西。

有很多示例库可以帮助创建这种影响。

这是Bootstrap Accordion

http://getbootstrap.com/javascript/#collapse-example-accordion

这是jQuery手风琴

https://jqueryui.com/accordion/

这是Dojo Accordion

http://dojotoolkit.org/reference-guide/1.10/dijit/layout/AccordionContainer.html