2

ここでは非常に単純なjQueryトグルが機能しています：http：//jsfiddle.net/yVa3U/1/-しかし、次のdivがクリックされたときにアクティブなdivをオフに切り替える方法を理解できません。

これを行う方法について何か提案はありますか？

ありがとう

$(document).ready(function() {

  $('.answer').hide();

  $(".toggle").click(function(){

      $("div[rel='profile_" + $(this).attr("profile") + "']").toggle(400);
});

});​
4

3 に答える 3

5

追加する必要があります

$(".answer").not($(this).next()).hide(400);

toggle()関数を呼び出す前に

サイドノート

  1. $("div[rel='profile_" + $(this).attr("profile") + "']").toggle(400);行を 次のように変更できます$(this).next().toggle(400);
  2. 属性を使用する代わりに、属性をprofile使用する方がよいでしょうdata

デモ

于 2012-12-22T20:29:00.497 に答える
2

あなたhide allは答えをクリックexceptすることで答えをする必要がありcurrentます、あなたはそれをこのように行うことができます、

ライブデモ

$(document).ready(function() {
    $('.answer').hide();
    $(".toggle").click(function() {
        currentAnswerDiv = $("div[rel='profile_" + $(this).attr("profile") + "']");
        $('.answer').not(currentAnswerDiv).hide();
        currentAnswerDiv.toggle(400);
    });
});​
于 2012-12-22T20:27:57.697 に答える
1

使用できますnext()

$(".toggle").click(function() {
       var $next=$(this).next().toggle(400)
      $('.answer').not($next).hide();  
});

javascriptでreadyイベントを待つよりも、CSSで回答クラスを非表示にすることをお勧めします

デモ：http：//jsfiddle.net/yVa3U/7/

APIリファレンス：http ：//api.jquery.com/next/

于 2012-12-22T20:30:20.663 に答える