jquery简单的SlideToggle分段 [英] jquery Simple SlideToggle in sections

问题描述

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

I am creating a simple page with questions and answers. This is how it looks:

SECTION>问题>答案

SECTION > Question > Answer

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

And this keeps on repeating with different sections, Each section has multiple questions and each question has an answer. By default everything is set to display:none. Now when someone clicks on any of the section, the related set of questions should showup, and when someone clicks on the question, it;s answer should show up.

仅限一个部分应该一次打开。

Only one section should be open at a time.

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

I kind of figured it would require parent(), child(), each() functions but I don't know how and where to use them :(

我以前使用过javascript并且曾经通过ID来做，但是因为我使用的是jQuery，我以为我会重写使用.section，.question和.answer类的页面

I have previously used javascript and used to do it via ID basis, but since I'm using jQuery, I thought I'd rewrite the page using classes as .section, .question and .answer

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

Here is a the simple fiddle page where I have created li elements : http://jsfiddle.net/DKMJH/2/

推荐答案

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

Your HTML is invalid, <li> elements don't nest like that so the browser will probably try to fix it up and what sort of selector you want for the next question or answer depends on how the browser decides to mangle your HTML. You probably want this 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 找到要打开的相应单个元素：

Now that we have valid HTML, we'll know what the final structure really is and you can use next to find the appropriate single element to open:

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

你还拼写了游标错误的CSS但这对你的jQuery没有任何影响。

You also spelled cursor wrong in your CSS but that won't have any effect on your jQuery.

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

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

ryudice was in first and got to the heart of the matter, I just needed more space than a comment to deal with the broken HTML issue. Using next only works because the browser is restructuring your HTML into a single unordered list.

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

If you only want one question open at a time, then close the other ones:

$('.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/

这篇关于jquery简单的SlideToggle分段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！