可以't清除引导折叠面板中的字段

can't clear fields in bootstrap collapsed panels

本文关键字：折叠 字段 清除 可以      更新时间：2023-09-26

在一个搜索页面上，我有几个引导面板，比如这个：

  • 选项卡搜索第1部分

    • 单击时会打开以下选项卡窗格@｛Html.RenderPartial（"_tabSearchPart1"）；｝

    我在页面顶部有一个重置按钮，可以清除所有字段：

    它调用以下代码：

        $("#searchReset").click(function () {
        $(':input')
             .not(':button, :submit, :reset, :hidden')
             .val('')
             .removeAttr('checked')
             .removeAttr('selected');
    });

    现在，除了折叠的选项卡面板之外，这一切都很完美。如果它们倒塌了，它们就无法清除。如果我点击选项卡打开它，然后点击重置按钮，它将清除该选项卡中的字段。

    我试着在上面的代码块中添加了这一行：$（"#tabSearchPart1"）.崩溃（"显示"）；但似乎没有任何效果。

    在清除之前，我尝试将每个面板设置为在点击重置时显示，但它所做的只是在不清除字段的情况下显示所有内容。

    有人知道一种清除坍塌面板中字段的方法吗？

    我不想让事件侦听器参与进来，因为它可能会在我点击选项卡时出现。

    问题是jquery不会对非显示元素（display:none）执行操作。我会尝试覆盖隐藏选项卡窗格的默认css。

    默认为：

    .tab-content>.tab-pane {
  display: none;
  visibility: hidden;
}
.tab-content>.active {
   display: block;
   visibility: visible;
}

    试试这个：

    .tab-content>.tab-pane {
    display: block;
    visibility: visible;
    position:absolute;
    top:-99999px;
    left:-99999px;
}
.tab-content>.active {
    position:static;
    top:0;
    left:0;
    display: block;
    visibility: visible;
}

    （请确保在默认引导CSS之后添加CSS）

    这将保证jQuery可以使用这些元素，然后可以清除这些元素。

    HTH，

    -Ted

    相关文章：