16

これが私の問題の素早いスキニーです：

$("a").toggle(function() { /*関数 A*/ }, function() { /*関数 B*/ });

function Aフォーム内が表示されます。ユーザーがフォームを正常に完了すると、フォームは再び非表示になります (元の状態に戻ります)。

同じフォームの内側function Bが隠されています。

この背後にある理論は、ユーザーがフォームを表示して入力するか、もう一度クリックしてフォームを非表示に戻すかを選択できるというものです。

私の質問は次のとおりです。現在、ユーザーがフォームに正常に入力し、フォームが非表示になった場合、ユーザーはフォームを表示するトグル状態に戻る前にリンクを 2 回クリックする必要があります。

トグルスイッチをプログラムで初期状態にリセットする方法はありますか?

4

6 に答える 6

36

を使用して、jQuery でトグルの状態を確認できます.is(":hidden")。だから私が使用した基本的なコードで：

$("#div_clicked").click(function() {
  if ($("#toggle_div").is(":hidden")) {
     // do this
  } else {
     // do that
}
}); # add missing closing
于 2011-12-16T21:08:54.640 に答える
21

jQuery には 2 つの.toggle()メソッドがあります。

.toggle()

一致した要素のセットのそれぞれを切り替えます。それらが表示されている場合、トグルはそれらを非表示にします。それらが非表示の場合、トグルで表示されます。

.toggle(even, odd)

1 回おきのクリックで 2 つの関数呼び出しを切り替えます。

この場合、最初のものが必要です。このような何かがうまくいくはずです：

$("a").click(function() {
    $("#theForm").toggle();
});
于 2008-10-28T19:15:42.270 に答える
5

これが私が使用したものです：

$(document).ready(function() {
    $('#listing_position').click(function() {

    var div_form = $('#listing_position_input');
        if (div_form.hasClass('hide')) {
           div_form.removeClass('hide');
        } else {
          div_form.addClass('hide');
        }
    });  
});
于 2009-11-17T17:32:13.607 に答える
2

追加の非表示/表示クラスを避けるために、これを使用しました。これは、より多くの機能を追加できるため、foxyのソリューションよりも柔軟性があると思いますが、私が初心者であることを引用しないでください

$("#clickie").click(function(){
  if ( $("#mydiv").css("display") == "none" ){
     $("#mydiv").show();
       } else {
        $("#mydiv").hide();
}
于 2011-02-07T04:28:27.880 に答える
2

ああ、それは人生の単純なことです...

私は後者の の定義を使用してtoggle(even,odd);いましたが、問題の元の説明に、2 番目のトグル関数がフォームを非表示にするだけでなく、フォームを破壊することも含めるのを忘れていました。

function A: Ajax は、追加された div にフォームをロードします。成功したフォーム投稿で div を非表示にして破棄します。

function B: div を破棄します。

あなたは両方とも、CSS プロパティのみを扱っていることを思い出しました。そのtoggle();ため、このタスクにはあまり適していません。しかし、その後、完了時にフォームを破棄することで、「奇妙な」状態ごとにフォームを不必要に再読み込みしていることに気付き、最終的にこれに戻りました。

$("リンク").click(関数() {
    if ($(this).siblings(".form-div").length == 0) {
        // フォームがロードされていません。フォームを読み込んで表示します。終わったら隠す
    }
    そうしないと {
        $(this).siblings(".form-div").toggle();
    }
});

...それは私がやりたいことをします。私をまっすぐに設定してくれてありがとうtoggle();！

于 2008-10-28T19:51:21.637 に答える