Question

理想情况下，我希望有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>

这是fieldset的切换器：

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

div toggler在另一组代码中：

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);
    }

如果我将字段集初始加载为可见，则内部切换正常。此内部切换连接到其他事件，不易修改。如何修改fieldset toggler以允许内部切换继续工作？

Answer 1

如果我告诉你你想要切换主要部分，然后切换内部部分取决于复选框状态。如此，代码和工作解决方案如下：

<强> 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/

Answer 2

获得切换整个字段集的解决方案，而不会弄乱内部切换：最初移开fieldset而不是隐藏fieldset：

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

然后，使用fieldset切换器打开/关闭移动类。

如何在没有JS的情况下将最初加载的切换视为隐藏，将其识别为不可见？

2 个答案: