更新为答案。

Question

当#filter输入中包含某些内容（文本）时，我试图隐藏$("#shop-subcategories-menu")，并在空白时将其切换回可见。我无法理解为什么console.log(true)会触发并返回true，但是 $("#shop-subcategories-menu").toggle(true);不会触发。

如果我直接将$("#shop-subcategories-menu").toggle(true);写到控制台，则div切换回可见状态。

我显然缺少了一些东西，但看不到有什么帮助。

长话短说：如何在<div id="shop-subcategories-menu">TEST</div>为空时使<input id="filter" type="text" placeholder="Search..">切换可见？

$(document).ready(function(){
 $(document).on('keyup', '#filter', function (e) {
            if ($(this).val() === '') {
                console.log(true);
                $("#shop-subcategories-menu").toggle(true);
            }
            var value = $(this).val().toLowerCase();
            $("#myTable tr").filter(function () {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
                $("#shop-subcategories-menu").toggle(false);
            });
        });
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<div id="shop-subcategories-menu">TEST</div>
<p>Type something in the input field to search the table for first names, last names or emails:</p>  
<input id="filter" type="text" placeholder="Search..">
<br><br>

<table>
  <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
  </tr>
  </thead>
  <tbody id="myTable">
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>john@example.com</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>mary@mail.com</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>july@greatstuff.com</td>
  </tr>
  <tr>
    <td>Anja</td>
    <td>Ravendale</td>
    <td>a_r@test.com</td>
  </tr>
  </tbody>
</table>
 

</body>
</html>

Answer 1

您不需要输入true，因为toggle()与当前元素状态恰好相反。

（如果显示，则将其隐藏，如果隐藏，则将其显示）

或：

只需使用jQuery的hide()和show() https://www.w3schools.com/jquery/jquery_hide_show.asp

拥有完全控制权

更新为答案。

您仍然需要处理不为空的情况

在您的函数中执行以下操作：

if ($(this).val() === '') {
  console.log(true);
  $("#shop-subcategories-menu").hide();
} else {
  $("#shop-subcategories-menu").show();
}

Answer 2

在没有表格和过滤的情况下，将其简化为一个更简单的情况。表格和过滤功能让您无所适从

您可以基于当前值创建一个简单的布尔值，并将其传递给toggle()

$(document).ready(function() {
  $(document).on('keyup', '#filter', function(e) {
    var showMenu = !$(this).val()
    $("#shop-subcategories-menu").toggle(showMenu);

  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="shop-subcategories-menu">TEST</div>

<p>Type something in the input field to search the table for first names, last names or emails:</p>

<input id="filter" type="text" placeholder="Search..">

Console.log在if语句中触发，但其余代码未触发

2 个答案:

更新为答案。