Question

非常简单，我想创建一个隐藏部分为＆＃34; extra＆＃34;搜索选项。即如果他们不需要，我不想给用户带来额外的负担，所以我希望能够：

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

我也想摆脱左边的＆＃34;滑入＆＃34;动画莫名其妙......不知道为什么要这样做！

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（“慢”）和.hide（“慢”）。

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

1 个答案: