Question

我知道它之前已经完成，但我正试图从头开始写这个......

我有Q＆amp;以下格式的部分：

<div class="Q">aaaa</div>
<div class="A">bbbb</div>

<div class="Q">cccc</div>
<div class="A">dddd</div>

我需要点击Q并在下面展开A.一次只能扩展一个部分。例如，如果我有A：bbbb扩展，然后我点击Q：cccc我需要折叠A：bbbb并展开A：dddd。

这是我到目前为止所得到的：

$(".A").hide();
$(".Q").click(function() {
    $(this).next("div").slideToggle("slow");
});

如何在打开新部分之前折叠任何可能打开的部分，而不会在展开之前先将其折叠？

Answer 1

var $answers = $(".A").hide(); // cache this to avoid overhead
$(".Q").click(function() {
    var $thisA = $(this).next('div.A');
    $answers
        .filter(':visible')
        .not($thisA)
        .slideUp('slow');
    $thisA.slideDown('slow');
});

Demo

Answer 2

我认为你在寻找

$(".A").hide();
$(".Q").click(function() {
    $(this).next("div:first").slideToggle("slow");
});

Answer 3

这很简单：

$('.q').click(function() {
    $('.a:visible').slideUp('slow');
    $(this).next('.a').is(":hidden").slideDown('slow');
})

使用/ jQuery仅展开一个部分

3 个答案: