一键实现两种jQuery效果

Question

我正在尝试使用 jQuery 手风琴制作一个模板。 我只需要一键打开 2 个不同的 div，有 2 个不同的效果。

我的代码：

jQuery：

$(document).ready(function() {
    $('div.question').click(function() {
        $('div.answer').slideUp(600);   
        $(this).next().slideDown(600);
    });
    $("div.answer").hide();
});

HTML：

<div class="question">Question</div>
<div class="answer">Answer</div>

但是，我正在尝试制作类似的东西，在单击问题后显示 2 个 div 和 2 个效果：

jQuery：

$(document).ready(function() {
    $('div.question').click(function() {
        $('div.answer').slideUp(600);   
        $('div.tip').fadeIn();  
        $(this).next().slideDown(600);
        $(this).next().fadeOut();
    });
    $("div.answer").hide();
    $("div.tip").hide();
});

HTML：

<div class="question">Question</div> <!--On click-->
<div class="answer">Answer</div> <!--Open with slide effect-->
<div class="tip">Tip</div> <!--Open with fade in effect-->

点击问题后如何显示 2 个 DIV 和 2 个效果？

有问题的演示：http://jsfiddle.net/3RtKS/

Answer 1

我更新了小提琴：http://jsfiddle.net/3RtKS/5/

要点是你需要两个下一个才能找到提示，我将淡入和淡出交换为我认为你想要的方式：

$('div.question').click(function() {
    $('div.answer').slideUp(600);   
    $('div.tip').fadeOut();  
    $(this).next().slideDown(600);
    $(this).next().next().fadeIn();
});

我还创建了第二个小提琴，我认为这可能是一种更好、更包含的方式来做到这一点 -

next

似乎有点脆弱。

http://jsfiddle.net/3RtKS/3/

这会将答案和提示嵌套在问题元素内（尽管您可以添加新元素）。这样做的好处是，您只需在单击处理的问题元素中找到提示和答案即可。

脚本就变成：

$('div.question').click(function() {
    $('div.answer').slideUp(600);   
    $('div.tip').fadeOut();  
    $('div.answer', this).slideDown(600);
    $('div.tip', this).fadeIn();
});

和 HTML：

<div class="question">Question 
    <div class="answer">Answer</div>
    <div class="tip">Tip</div>
</div>

最后，我可能会有更多的 div（例如

questionText

div）以使其更易于管理。

Answer 2

不确定你的意思，试试这个：

$(document).ready(function() {
    $('div.question').click(function() {
        $('.answer').slideUp(600);   
        $('.tip').fadeOut(600);

        $(this).next('.answer').slideToggle(600);   
        $(this).next('.answer').next('.tip').fadeToggle(600);
    });
    $("div.answer").hide();
    $("div.tip").hide();
});​

演示：http://jsfiddle.net/3RtKS/7/