Question

<input id="search" type="text">

<ul>
  <li><a href="">One</a></li>
  <li><a href="">Two</a>
    <ul>
      <li><a href="">Three</a></li>
      <li><a href="">Four</a></li>
      <li><a href="">Five</a></li>
    </ul>
  </li>
  <li><a href="">Six</a></li>
</ul>

如果用户搜索term＆＃34; two＆＃34;，则＆＃34; two＆＃34;中的所有孩子应该是可见的，并且如果用户搜索＆＃34;三＆＃34;，那么只有＆＃34;三＆＃34;和它的父母。＆＃34;两个＆＃34;，应该是可见的，这意味着＆＃34;四＆＃34;和＆＃34;五＆＃34;将隐藏在这种情况下。最后一种情况是在这里不起作用的情况，也就是说，如果你搜索一个父节点，那么它的子节目现在是隐藏的，但是我希望它们被显示出来。

Fiddle Link

Answer 1

siblings()函数对此非常有用，这是我在飞行中制作的小提琴，需要进行一些编辑，但它会让你开始。 https://jsfiddle.net/vLod1kcr/

HTML：

<input id="search" type="text">

<ul class="menu">
  <li><a href="javascript:;">One</a>
    <ul>
      <li><a href="javascript:;">Three</a></li>
      <li><a href="javascript:;">Four</a></li>
      <li><a href="javascript:;">Five</a></li>
    </ul>
  </li>
  <li><a href="javascript:;">Two</a></li>
  <li><a href="javascript:;">Six</a></li>
</ul>

jQuery的：

$(document).ready(function(){
    $('#search').on('keyup', function() {
      var searchText = $(this).val().toLowerCase();
      $('li, ul').each(function(){
        $(this).show();
      });

      $('.menu a').each(function(){
        if ($(this).text().toLowerCase() == searchText) {
          $(this).parent().siblings().hide();
          $(this).parent().parent().parent().show().siblings().hide();
        }
      });
   });
});

Answer 2

略微修改的HTML - 将类名添加到<IfModule mod_rewrite.c> <IfModule mod_negotiation.c> Options -MultiViews </IfModule> RewriteEngine On # domain.com redirect to www.domain.com RewriteCond %{HTTP_HOST} !^www\. RewriteRule ^(.*)$ http://www.%{HTTP_HOST}/$1 [R=301,L] # Redirect Trailing Slashes If Not A Folder... RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)/$ /$1 [L,R=301] # Handle Front Controller... RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.php [L] </IfModule>标记：

JS：

<input id="search" type="text"/> <input type="button" value="Search" id="btn" />

<ul>
  <li><a class="parent" href="">One</a></li>
  <li><a class="parent" href="">Two</a>
    <ul>
      <li><a class="child" href="">Three</a></li>
      <li><a class="child" href="">Four</a></li>
      <li><a class="child" href="">Five</a></li>
    </ul>
  </li>
  <li><a class="parent" href="">Six</a></li>
</ul>

从嵌套的li中搜索

2 个答案: