javascript 我如何使这个展开/折叠常见问题列表起作用？

How do I make this expand/collapse FAQ list to work?

提问by user1322429

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.

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

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>

<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

以下是我正在使用的 JavaScript

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

回答by David says reinstate Monica

May I suggest some valid HTML (given that an liis a valid child of onlyan olor uland a divis nota valid child of eitherof those elements), such as:

我建议一些有效的HTML（给定的li是一个有效的小孩只有一个ol或ul与div是不是一个有效的儿童或者这些元素的），如：

<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:

和 jQuery：

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

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

JS Fiddle demo.

JS小提琴演示。

Or with a dl:

或者用一个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:

和 jQuery：

$('dd').hide();

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

JS Fiddle demo.

JS小提琴演示。

回答by AlexC

try this one

试试这个

$('li a').click(function () {
    var $this = $(this);
    $this.parent().next().toggleClass("minusimageapply").slideToggle();
});?

*Live example *

*现场示例 *

回答by Steve

Or this...

或这个...

$('li.faq-answer').hide();
$('li.faq-question').click(function () {
    $(this).next().slideToggle();
});

li {
        list-style:none;
}
li.faq-question {
 font-weight: 700;
}
li.faq-question:hover {
 cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
 <li class="faq-question">Question 1</li>
 <li class="faq-answer">Curabitur blandit tempus porttitor.</li>
 <li class="faq-question">Question 2</li>
 <li class="faq-answer">Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</li>
 <li class="faq-question">Question 3</li>
 <li class="faq-answer">Aenean lacinia bibendum nulla sed consectetur. Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo.</li>
 <li class="faq-question">Question 4</li>
 <li class="faq-answer">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</li>
 <li class="faq-question">Question 5</li>
 <li class="faq-answer">Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
</ul>