3

ページがロードされたときに に設定される div がありますdisplay:none;。次の簡単なコードを使用して開くことができます。

$(".field-group-format-toggler").click(function()
{
$(".field-group-format-wrapper").css({'display':'block'});
});

開いたら、ユーザーが閉じられるようにしたいので、 .is(':visible') 関数を使用してから、元のコードを if ステートメントでラップしてみましたが、今回はdisplay:none;

if($('.field-group-format-wrapper').is(':visible')){

   $(".field-group-format-toggler").click(function()
  {
    $(".field-group-format-wrapper").css({'display':'none'});
 });

}

ただし、これは機能していないようで、私が知っている構文エラーは発生していません。

私もこれを試しました：

if ($('.field-group-format-wrapper').is(':visible'))
$(".field-group-format-toggler").click(function () {
$(".field-group-format-wrapper").css({'display':'none'});
});

...しかし、それもうまくいきませんでした。

4

3 に答える 3

5

トグル機能を使用するだけです：

$(".field-group-format-toggler").click(function()
{
  $(".field-group-format-wrapper").toggle();
});

これにより、'.field-group-format-wrapper'要素が現在非表示の場合は表示され、現在表示されている場合は非表示になります。

参考までに、質問のコード スニペットが機能しなかった理由は、クリックごとではなく、DOM Ready での要素の可視性のみをチェックしているためです。そのため、要素を表示するイベント ハンドラは決してアタッチされません。

于 2012-06-06T15:24:39.847 に答える
1

あなたの関数はページの読み込み時にのみ呼び出され、その時点ですべての div が非表示になっていると思います。

クリック イベント ハンドラーで可視性を確認してみませんか?

$('.field-group-format-toggler').click(function(){
  var $wrapper = $('.field-group-format-wrapper'); //Maybe $(this).parent()?
  if($wrapper.is(':visible'))
    $wrapper.hide();
  else
    $wrapper.show();
于 2012-06-06T15:28:01.947 に答える
1

すでに述べたように、トグル機能を使用して目的を達成できます。

少し余分な情報を追加するには、あなたがやっているようにイベントを添付するとき、実際にはサブスクリプション モデルを使用しています。

イベントを登録すると、そのハンドラにサブスクライブされたイベントのキューに登録されます。この場合、CSS を変更するために 2 番目のイベントを追加すると、最初のイベントを上書きするのではなく、イベントを追加することになります。

実際に問題を引き起こしているわけではありませんが、注意する価値があります。

于 2012-06-06T15:29:02.803 に答える