-1

jQueryアコーディオンを使用してテンプレートを作成しようとしています。ワンクリックで2つの異なる効果を持つ2つの異なるdivを開く必要があります。

私のコード：

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つの効果を持つ2つのDIVを表示するにはどうすればよいですか？

問題のあるデモ：http：//jsfiddle.net/3RtKS/

4

2 に答える 2

1

意味がわからない場合は、これを試してください。

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

于 2012-08-20T10:26:49.970 に答える
1

フィドルを更新しました：http：//jsfiddle.net/3RtKS/5/

要点は、ヒントを見つけるために次の2つが必要であるということです。フェードインとフェードアウトを入れ替えて、希望どおりにフェードインしました。

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

私はまた、これを行うためのより良い、より封じ込められた方法であると思う2番目のフィドルを作成しました-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>

questionText最後に、管理を容易にするために、おそらくさらにいくつかのdiv（たとえば、 div）があります。

于 2012-08-20T10:38:04.297 に答える