我如何使这个展开/折叠常见问题列表起作用? [英] How do I make this expand/collapse FAQ list to work?

问题描述

这是我想要展开/折叠的列表:我的目标只是切换展开/折叠，让这个列表像手风琴一样工作.我不明白的是如何获得 <div>使用下面提供的 javascript 从隐藏状态到可见状态.非常感谢任何资源或直接帮助.

运费

<li class="plusimageapply"><a name="faq-question">为什么我会看到某些商品的价格而不是其他商品的价格?如何获取我想购买的商品的价格?</a></li><div style="display: none;">这是对上述问题的回答示例.</div><li class="plusimageapply"><a name="faq-question">隔夜送达如何处理?</a></li><div style="display: none;">AMOeasy 提供五种隔夜送货选项.在结账时，只需检查最能满足您需求的选项并处理您的订单.<ul><li>UPS 订单必须在美国东部标准时间下午 5:30/太平洋标准时间下午 2:30 之前下达.</li><li>FedEx 订单必须在美国东部标准时间下午 8:00/太平洋标准时间下午 5:00 之前下达.</li>

如果您担心该商品可能没有库存，请致电 877-AMO-4LIFE (877-266-4543) 联系客户服务.

以下是我使用的 JavaScript

解决方案

我可以建议一些有效的 HTML(假设 li 是 only ol 或 ul 和 div not那些元素中 的有效子元素)，例如:

<li class="q">问题一</li><li>第一个问题的答案</li><li>第一个问题的第二个答案</li><li class="q">问题二</li><li>第一个问题的答案</li><li>问题二的第二个答案</li><li class="q">问题三</li><li>问题三的第一个答案</li><li>问题三的第二个答案</li>

还有 jQuery:

$('li:not(".q")').hide();$('li.q').click(功能(){$('li:not(".q")').slideUp();$(this).toggleClass('open');});

JS Fiddle 演示.

或者使用dl:

<dt>问题一</dt><dd>第一个问题的第一个答案</dd><dd>第一个问题的第二个答案</dd><dt>问题二</dt><dd>第一个问题的答案</dd><dd>问题二的第二个答案</dd><dt>问题三</dt><dd>问题三的第一个答案</dd><dd>问题三的第二个答案</dd></dl>

还有 jQuery:

$('dd').hide();$('dt').click(功能() {var toggle = $(this).nextUntil('dt');切换.slideToggle();$('dd').not(toggle).slideUp();});

JS Fiddle 演示.

Here's my list that I want to expand/collapse: My goal is simply to toggle expand/collapse, to have this list act like an accordion. What I don't understand is how to get the <div> from a hidden state to a visible state using the javascript provided below. Any resources or direct help is greatly appreciated.

Shipping

<li class="plusimageapply"><a name="faq-question">Why do I see prices for some items and not others? How do I get pricing on items that I want to buy?</a></li>

<div style="display: none;">Ths is a sampel of an answer tot he above question.</div>

<li class="plusimageapply"><a name="faq-question">How do I handle an overnight delivery?</a></li>

<div style="display: none;">AMOeasy offers five overnight shipping options. During checkout, simply check the option that best meets your needs and process your order.
  <ul>
    <li>UPS orders must be placed before 5:30pm EST / 2:30pm PST.</li>
    <li>FedEx orders must be place before 8:00pm EST / 5:00pm PST.</li>
  </ul>
  If you are concerned that the item may not be in stock, please call customer service at 877-AMO-4LIFE (877-266-4543).
</div>

The following is the JavaScript I'm using

<script type="text/javascript">
$(document).ready(function(){
    $('li a').click(function () {
        var questionname= this.name;
        $("#"+questionname).toggle();
        $(this).parent().toggleClass("minusimageapply");
    });
});
</script>

解决方案

May I suggest some valid HTML (given that an li is a valid child of only an ol or ul and a div is not a valid child of either of those elements), such as:

<ul>
    <li class="q">Question One</li>
    <li>first answer to question one</li>
    <li>second answer to question one</li>
    <li class="q">Question two</li>
    <li>first answer to question two</li>
    <li>second answer to question two</li>
    <li class="q">Question three</li>
    <li>first answer to question three</li>
    <li>second answer to question three</li>
</ul>

And the jQuery:

$('li:not(".q")').hide();

$('li.q').click(
    function(){
        $('li:not(".q")').slideUp();
        $(this).toggleClass('open');
    });

JS Fiddle demo.

Or with a dl:

<dl>
    <dt>Question One</dt>
    <dd>first answer to question one</dd>
    <dd>second answer to question one</dd>
    <dt>Question two</dt>
    <dd>first answer to question two</dd>
    <dd>second answer to question two</dd>
    <dt>Question three</dt>
    <dd>first answer to question three</dd>
    <dd>second answer to question three</dd>
</dl>
​

And the jQuery:

$('dd').hide();

$('dt').click(
    function() {
        var toggle = $(this).nextUntil('dt');
        toggle.slideToggle();
        $('dd').not(toggle).slideUp();
    });​

JS Fiddle demo.

这篇关于我如何使这个展开/折叠常见问题列表起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！