0

理想的には、2つのトグラーが必要です。フィールドセット トグルをクリックすると、フィールドセットが表示され、内部の div が非表示になります。イベントが発生したとき、または div トグルをクリックすると、div が表示されます。 2 つのトグラーのうち 1 つしか管理できません。

これはhtmlです

<a href="#" class="fieldset-toogler-trigger">click here</a>
<fieldset class="fieldset" style="display:none">
<input>//first inputs
<input> 2nd input
<input id="edit-text" name="custom-text" type="checkbox value=""/>
<div id="wrapper">include several fields that initially hidden</div>
</fieldset>

これはフィールドセットのトグルです:

$("a.fieldset-toggle-trigger").click(function() {
  $(".fieldset").toggle();
}

div トグルは別のコード グループ内にあります。

var e_fields = $("div#wrapper");
    //fadein/fadeout with an event:
    function bindEditTextClick(){
      $("input#edit-text").click( function() {
      if ($(this).attr('checked')) {
        e_fields.fadeIn(750);
      } else {
        e_fields.fadeOut(750, function() {
      });
    }
    });
    }

    //toggle as a part of another live click fuunction:
    if (e_fields.is(':visible')) {
        e_fields.fadeOut(500);
    }

フィールドセットを最初に表示状態でロードすると、内側のトグルが正常に機能します。この内側のトグルは他のイベントに接続されており、簡単には変更できません。内部トグルが引き続き機能するようにフィールドセット トグルを変更するにはどうすればよいですか?

4

2 に答える 2

0

正しければ、メインセクションを切り替えてから、チェックボックスの状態に応じて内部セクションを切り替えます。そうです、コードと実用的なソリューションは以下のとおりです。

html

<a href="#" class="fieldset-toogler-trigger">click here</a>
<fieldset class="fieldset">
    <input /><br />
    <input /><br />
    <input id="edit-text" name="custom-text" type="checkbox" value=""/>
    <div id="wrapper">include several fields that initially hidden</div>
</fieldset>

css

fieldset { display:none; }
#wrapper { display:none; }

js

$(function() {
    $(".fieldset-toogler-trigger").click(function() {
        $(".fieldset").toggle();
    });
    $("#edit-text").change(function() {
        var action = 'fadeOut';
        if ($(this).is(':checked')) {
            action = 'fadeIn';
        }
        $('#wrapper')[action](750);
    });
});

jsfiddle

http://jsfiddle.net/y7PKk/

于 2013-01-23T16:32:51.713 に答える
0

内側のトグルを台無しにすることなく、フィールドセット全体をトグルするための解決策を得ました: 最初に、フィールドセットを非表示にする代わりに、フィールドセットを遠ざけます:

.moveaway{
    position:absolute;left:-999em;
}

次に、fieldset トグルを使用して moveaway クラスのオン/オフを切り替えます。

于 2013-01-24T03:17:19.800 に答える