Question

我正在创建一个包含问题和答案的简单页面。这是它的外观：

部分＆gt;问题＆gt;答案

这会不断重复不同的部分，每个部分都有多个问题，每个问题都有答案。默认情况下，所有内容都设置为display：none。现在当有人点击任何一个部分时，相关的一组问题应该显示出来，当有人点击这个问题时，它就会显示答案。

一次只能打开一个部分。

我认为它需要parent（），child（），each（）函数，但我不知道如何以及在何处使用它们：（

我之前使用过javascript并且习惯通过ID来实现，但由于我使用的是jQuery，我以为我会使用.section，.question和.answer等类重写页面

这是一个简单的小提琴页面，我在其中创建了li元素：http://jsfiddle.net/DKMJH/2/

Answer 1

这是：

$('.question, .answer').css("display","none");
$('.section').click(function (){
    $(this).next('.question').slideToggle(500);
});
$('.question').click(function (){
    $(this).next('.answer').slideToggle(500);
});

Answer 2

您的HTML无效，<li>元素不会像这样嵌套，因此浏览器可能会尝试修复它，您希望下一个问题或答案的选择器取决于浏览器如何决定破坏你的HTML。你可能想要这个HTML：

<ul>
    <li class="section">Section One</li>
    <li class="question">This is a question</li>
    <li class="answer">This is an answer</li>
    <li class="section">Section Two</li>
    <li class="question">This is another question</li>
    <li class="answer">This is another answer</li>
</ul>

现在我们有了有效的HTML，我们将知道最终结构到底是什么，您可以使用next找到要打开的相应单个元素：

$('.section').click(function() {
    $(this).next('.question').slideToggle(500);
});
$('.question').click(function() {
    $(this).next('.answer').slideToggle(500);
});

您在CSS中拼写错误cursor但这对您的jQuery没有任何影响。

修复小提琴：http://jsfiddle.net/ambiguous/jcnMa/

ryudice是第一个涉及问题的核心，我只需要更多的空间而不是评论来处理破碎的HTML问题。仅使用next是有效的，因为浏览器正在将HTML重组为单个无序列表。

如果您只想一次打开一个问题，请关闭其他问题：

$('.section').click(function() {
    var $others = $('.question:visible').not(this);
    $others.next('.answer').hide();
    $others.slideToggle(500);
    $(this).next('.question').slideToggle(500);
});

演示：http://jsfiddle.net/ambiguous/jcnMa/1/

Answer 3

我认为这适合你想要的东西： -

$('.question, .answer').css("display", "none");

$('.section').click(function() {
    $(this).nextUntil('.section', '.question, .answer:visible').slideToggle(500);    
});

$('.question').click(function() {
    $(this).next('.answer').slideToggle(500);
});

jquery简单的SlideToggle分段

3 个答案: