0

理想情况下，我想要 2 个切换器。当单击字段集切换器时，字段集会显示，其中隐藏了一个 div。当事件发生或单击 div 切换器时，会显示 div。 我只能管理 2 个切换器中的一个工作。

这是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;
}

然后，使用字段集切换器来打开/关闭移动类。

于 2013-01-24T03:17:19.800 回答