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

非常简单，我想创建一个表单，它有一个隐藏的“额外”搜索选项部分。i、 e.如果用户不需要，我不想让他们负担额外的绒毛，因此我希望能够：

• 创建一个隐藏的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>

以下是到目前为止有效的bits引导：

---

我也想以某种方式摆脱“从左滑入”动画。。。不知道它为什么这么做

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

$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”）。

额外的字段是什么样子的？你能把它们作为数据附加1.添加吗。。额外的5？还是比这更复杂？这几乎是完美的！谢谢不过有一件事，在同一页上有三个表单，每个表单都有一个隐藏的额外选项字段。如果我们在一个表单中显示隐藏的div，填充其中一个字段，然后提交它，那么所有表单都将显示隐藏的字段。我们有三个带有“toggle extra options”类的按钮，但每个按钮都有不同的数据目标，我不知道为什么会发生这种情况。[它应该只显示提交的表单中的隐藏字段，并填充了字段。忽略我的最后一个，我处理表单的脚本正在重新填充隐藏的表单字段&“合法地”显示它们。通过转储一些控制台日志，我可以看到，一旦我修改PHP，这将非常有效：）

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