Question

所以我有一个当前的HTML页面我建立了一个包含＆＃34;专家＆＃34;的列表。以及他们的专业知识和他们的位置。

Here是相关的JSFiddle。

如下所示，这是我的HTML，后面是我用于搜索功能的jQuery。

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

部分。

如果能够在搜索过程中和搜索后获得可折叠的任何帮助，我们将不胜感激。

谢谢！

Answer 1

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

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

问题在于您的选择器$('.ui-content div')。您正在遍历div的每个.ui-content个孩子。然后，当调用.show()时，您将其中的每一个设置为display:block，从而强制它们不再折叠。我不太确定为什么它会打破切换。但我确定这是因为儿童造型已被覆盖。

因此，解决方案是仅使用child selector: >选择.ui-content的直系后代。

我仍然使用searchTerm区域内if的支票。

更新2

反映我之前更新的更新小提琴：https://jsfiddle.net/dgaz8n5k/17/

Answer 2

如果直接更改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"});
}

搜索中断可折叠DIV

2 个答案: