Bootstrap jQuery，如何在填充子表单字段时显示隐藏的 DIV 并在隐藏 DIV 时清除它们？

Question

非常简单，我想创建一个包含“额外”搜索选项隐藏部分的表单。即，如果用户不需要额外的绒毛，我不想给他们带来负担，所以我希望能够：

• 创建一个隐藏的 div 来保存所有额外的字段（这可行）
• 在单击按钮时显示/隐藏该字段（此方法有效）
• 如果隐藏 div 中的字段已填充且 div 再次隐藏（未实现），则清除它们
• 如果 div 中的任何表单字段被填充，即在页面刷新或表单提交时，自动使 div 可见。 [提交搜索后，这些字段将使用最后一次搜索重新填充，以便用户可以再次搜索，如果填充了额外字段之一，我需要 div 可见，以便他们知道他们在搜索什么]
• 无需指定单独的字段名称即可重复使用 ~ 同一页面上有 3 个几乎相同的表单

这是表格的一部分：

<div class="row" style="display:none;" id="stainless-extra-options">

    <div class="form-group col-sm-3">
        <label for="maxlen">Max Length</label>
        <input name="maxlen" type="text" id="maxlen"  value="[[!+formdata.maxlen]]" class="form-control input-sm" />
    </div>

    <div class="form-group col-sm-3">
        <label for="maxwid">Max Width</label>
        <input name="maxwid" type="text" id="maxwid" value="[[!+formdata.maxwid]]" class="form-control input-sm" />
    </div>

    <div class="form-group col-sm-3">
        <label for="minlen">Min Length</label>
        <input name="minlen" type="text" id="minlen"  value="[[!+formdata.minlen]]" class="form-control input-sm" />
    </div>

    <div class="form-group col-sm-3">
        <label for="minwid">Min Width</label>
        <input name="minwid" type="text" id="minwid" value="[[!+formdata.minwid]]" class="form-control input-sm" />
    </div>

</div>



<div class="row">
    <div class="form-group col-sm-4">
        <button type="submit" name="search" id="search" value="search" class="btn btn-sm btn-primary btn-block">Search Stainless</button>
    </div>
    <div class="form-group col-sm-4">
        <button type="button" name="reset" id="reset" value="reset" class="btn btn-sm btn-primary btn-block reset">New Search</button>
    </div>
    <div class="form-group col-sm-4">
        <button type="button" name="expand-stainless" id="expand-stainless" value="expand-stainless" class="btn btn-sm btn-primary btn-block toggle-extra-options" 
        data-target="#stainless-extra-options">More Options</button>
    </div>
</div>

还有 jQuery：

$( ".toggle-extra-options" ).click(function() {

  var target_selector = $(this).attr('data-target');
  var $target = $(target_selector);

  console.log('clicked ' + target_selector);

  if ($target.is(':hidden')){console.log('target hidden');
    $target.show( "slow" );
    $(this).html('Less Options');
  }else{console.log('target visible');
    $target.hide( "slow" );
    $(this).html('More Options');
  }

  console.log($target.is(':visible'));    

});

以下是目前可用的部分代码：BOOTPLY

我也想以某种方式摆脱“从左侧滑入”动画...不知道为什么要这样做！

Answer 1

在隐藏时清除所有隐藏字段，而不是

$target.hide( "slow" );

这样做：

$target.hide( "slow", function() {
    $target.find('input').val('');
});

要在初始页面加载时显示隐藏字段（如果其中任何一个包含填充值），请将其添加到您的代码中：

$( document ).ready(function() {
    $( ".toggle-extra-options" ).each(function() {
        var target_selector = $(this).attr('data-target');
        var $target = $(target_selector);
        var show = false;
        $target.find('input').each(function() {
            if ($(this).val() != '') show = true;
        });
        if (show) $target.show();
    }); 
});

如果你想要更好的动画效果，试试 jQuery 的 .slideUp() 和 .slideDown() 代替 .show( "slow" ) 和 .hide( "slow" )。