这是我要展开/折叠的列表:我的目标只是切换展开/折叠,让这个列表像 Accordion 一样。我不明白的是如何使用下面提供的 javascript 将
航运
<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>
以下是我正在使用的 JavaScript
<script type="text/javascript">
$(document).ready(function(){
$('li a').click(function () {
var questionname= this.name;
$("#"+questionname).toggle();
$(this).parent().toggleClass("minusimageapply");
});
});
</script>
最佳答案
我可以建议一些有效的 HTML(假定 li
是only 和 ol
的有效子项或 ul
和 div
不是 either 的有效子级 这些元素),例如:
<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>
还有 jQuery:
$('li:not(".q")').hide();
$('li.q').click(
function(){
$('li:not(".q")').slideUp();
$(this).toggleClass('open');
});
或者使用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>
还有 jQuery:
$('dd').hide();
$('dt').click(
function() {
var toggle = $(this).nextUntil('dt');
toggle.slideToggle();
$('dd').not(toggle).slideUp();
});
关于javascript - 如何使这个展开/折叠常见问题解答列表起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10077683/