切换 jQuery div 以打开和关闭无法正常工作

Question

我正在尝试为数据表过滤器设置一个切换开关。创建基本按钮时，我可以使用打开和关闭 div

<a data-toggle="collapse" href="#epdatatable_filter" role="button" aria-expanded="false" aria-controls="epdatatable_filter" class="btn btn-labeled bg-primary">Filters </a>

我的问题是当我在 div 中添加一个重置按钮并将按钮设置为关闭时，它会以完全不同的样式关闭，然后不会重新打开。我注意到第一个按钮如何移除显示：无，但重置不能。

有没有办法让它工作，或者有没有更有效的方法？最终结果是在 div 中创建了一个 APPLY 和 RESET 按钮，这两个按钮随后都会关闭。

我的代码：https://jsfiddle.net/martinhackett/Lru4npte/17/

                <div style="float: right"><a data-toggle="collapse" href="#epdatatable_filter" role="button" aria-expanded="false" aria-controls="epdatatable_filter" class="btn btn-labeled bg-primary">Filters </a></div>


                <div class="card collapse" id="epdatatable_filter">
                  <div class="card-header header-elements-inline">
                    <h5 class="card-title">Search</h5>
                  </div>

                  <div class="card-body">
                    <div class="row">
                      <div style="float: right"><a id="epdatatable_filter_reset" role="button" class="btn btn-labeled bg-primary">Reset filters </a></div>

                      <div class="col-xl-3">
                        <label for="searchbox"><b>Name:</b> </label>
                        <div style="padding-bottom: 10px">
                          <input class="form-control filter_reset" type="text" id="searchbox">
                        </div>
                      </div>
                      <div class="col-xl-3">
                        <label for="searchbox1"><b>Email:</b> </label>
                        <div style="padding-bottom: 10px">
                          <input class="form-control filter_reset" type="text" id="searchbox1">
                        </div>
                      </div>
                      <div class="col-xl-3">
                        <label for="searchbox"><b>Telephone:</b> </label>
                        <div style="padding-bottom: 10px">
                          <input class="form-control filter_reset" type="text" id="searchbox2">
                        </div>
                      </div>
                      <div class="col-xl-3">
                        <p id="searchbox3"><label><b>Filter:</b></label><br></p>
                      </div>
                      <div class="col-xl-12">
                        <button id="filter_submit">Apply Filters</button>
                      </div>

                    </div>
                  </div>
                </div>


<script>
$(document).ready(function () {


$('#epdatatable_filter_reset').click(function(){
    $('#epdatatable_filter').toggle();
})

});
</script>

Answer 1

我编辑了你的代码，这很简单，这就是你想要做的：

• 从 div 中移除 show 类
• 设置are-expanded="false"
• 删除显示无 这是一个例子：Check Me

Answer 2

删除元素和数据属性上的切换 aria-expanded="false" aria-controls="epdatatable_filter" 就像其他链接一样，它将起作用。

            <div style="float: right"><a data-toggle="collapse" href="#epdatatable_filter" role="button" aria-expanded="false" aria-controls="epdatatable_filter" class="btn btn-labeled bg-primary">Filters </a></div>


            <div class="card collapse" id="epdatatable_filter">
              <div class="card-header header-elements-inline">
                <h5 class="card-title">Search</h5>
              </div>

              <div class="card-body">
                <div class="row">
                  <div style="float: right"><a id="epdatatable_filter_reset" role="button" class="btn btn-labeled bg-primary"  data-toggle="collapse" href="#epdatatable_filter" role="button" aria-expanded="false" aria-controls="epdatatable_filter" >Reset filters </a></div>

                  <div class="col-xl-3">
                    <label for="searchbox"><b>Name:</b> </label>
                    <div style="padding-bottom: 10px">
                      <input class="form-control filter_reset" type="text" id="searchbox">
                    </div>
                  </div>
                  <div class="col-xl-3">
                    <label for="searchbox1"><b>Email:</b> </label>
                    <div style="padding-bottom: 10px">
                      <input class="form-control filter_reset" type="text" id="searchbox1">
                    </div>
                  </div>
                  <div class="col-xl-3">
                    <label for="searchbox"><b>Telephone:</b> </label>
                    <div style="padding-bottom: 10px">
                      <input class="form-control filter_reset" type="text" id="searchbox2">
                    </div>
                  </div>
                  <div class="col-xl-3">
                    <p id="searchbox3"><label><b>Filter:</b></label><br></p>
                  </div>
                  <div class="col-xl-12">
                    <button id="filter_submit">Apply Filters</button>
                  </div>

                </div>
              </div>
            </div>

删除这部分

    $('#epdatatable_filter_reset').click(function(){
    $('#epdatatable_filter').toggle();
})

或使用引导方法

collapse('toggle')