搜索中断可折叠 DIV

Question

所以我有一个正在构建的当前 HTML 页面，其中包含 "experts" 的列表以及他们的专业类别和位置。

Here 是相关的 JSFiddle。

正如您在下面看到的，这是我的 HTML，后面是我用于搜索功能的 jQuery。

jQuery(document).ready(function($) {

      $('.ui-content div').each(function() {
        $(this).attr('data-search-term', $(this).text().toLowerCase());
      });

      $('.live-search-box').on('keyup', function() {

        var searchTerm = $(this).val().toLowerCase();

        $('.ui-content div').each(function() {

          if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
            $(this).show();
          } else {
            $(this).hide();
          }

        });

      });

<body>
  <div>
    <input type="text" class="live-search-box" placeholder="Search Here" />
  </div>

  <div>
    <div role="main" class="ui-content">
      <div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a">
        <h3>Category</h3>
        <p>Defenition</p>
        <div data-role="collapsible" data-theme="a" data-content-theme="a">
          <h3>Sub-category</h3>
          <div data-role="collapsible" data-theme="a" data-content-theme="a">
            <h3>Location</h3>
            <p>Point of Contact</p>
          </div>
          <!-- /section 1A -->
        </div>
        <!-- /section 1 -->
      </div>

      <div data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a">
        <h3>Category2</h3>
        <p>Defenition2</p>
        <div data-role="collapsible" data-theme="a" data-content-theme="a">
          <h3>Sub-Category</h3>
          <div data-role="collapsible" data-theme="a" data-content-theme="a">
            <h3>Location</h3>
            <p>Point of Contact2</p>
          </div>
        </div>
      </div>
    </div>
  </div>

我让搜索正常工作，唯一的问题是当我使用或清除搜索时，它会破坏我 HTML 中的可折叠

部分。

任何有关如何在搜索期间和搜索后将其折叠的帮助将不胜感激。

谢谢！

Answer 1

如果您直接更改 css，而不是调用 show() 和 hide()，它似乎可以按照您想要的方式工作。我猜 show() 做了一些递归的事情..

if ($(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
   $(this).css({visibility:"visible"});
} else {
   $(this).css({visibility:"hidden"});
}

Answer 2

问题是您使用 .hide() 在 CSS 中设置了 display: none。但是在清除搜索字段后，您永远不会重置它。您应该添加额外的检查以重新显示隐藏的元素。

if (!searchTerm || searchTerm=='') {
    $(this).show();
}

如果你把它放在你的 .each() 循环中，你应该在这方面做得很好。

但另一个问题是解决搜索字段为空时出现的控制台错误。我修改了您的 if 检查以查看 searchTerm 是否存在。

if (searchTerm && $(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1)

https://jsfiddle.net/dgaz8n5k/5/

更新

我误读了你的问题，无法理解你真正在问什么。有几件事需要处理（从我的角度来看）。但是要解决您的问题，请使用以下代码

  $('.ui-content > div').each(function () {
    if (searchTerm && $(this).filter('[data-search-term *= ' + searchTerm + ']').length > 0 || searchTerm.length < 1) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });

问题出在您的 select 或 $('.ui-content div') 上。您正在遍历 .ui-content 的每个子 div。然后，当 .show() 被调用时，您将每个设置为 display:block，强制它们不再折叠。我不太确定为什么它会破坏切换。但我敢肯定这是因为子样式已被覆盖。

所以解决方案是 select 只是 .ui-content 的直系后代 child selector: >。

我仍在 if 块中对 searchTerm 使用检查。

更新 2

更新后的 fiddle 反映了我之前的更新：https://jsfiddle.net/dgaz8n5k/17/

搜索中断可折叠 DIV

Search breaks collapsible DIV

html

javascript

css

jquery

jsfiddle