jQuery在显示隐藏元素时遇到问题_Jquery

jQuery在显示隐藏元素时遇到问题

jquery

jQuery在显示隐藏元素时遇到问题,jquery,Jquery,我有一些嵌套列表，并希望能够有一个“显示所有”按钮在顶部，但它似乎不起作用有什么建议吗？我知道可能还有其他方法可以完成类似的事情，但我正利用这个机会来学习更多关于jquery的知识，并试图找出这个特定示例不起作用的原因以下是行动：还有密码 <html> <head> <script type="text/javascript" src="../jquery/jquery-1.4.4.js"></script> <scr

我有一些嵌套列表，并希望能够有一个“显示所有”按钮在顶部，但它似乎不起作用

有什么建议吗？我知道可能还有其他方法可以完成类似的事情，但我正利用这个机会来学习更多关于jquery的知识，并试图找出这个特定示例不起作用的原因

以下是行动：

还有密码

<html>
<head>
    <script type="text/javascript" src="../jquery/jquery-1.4.4.js"></script>

    <script type="text/javascript">
      $( function () {
          $("h1").click ( function () {
              var subitems = $(".bar");
              $(".bar").show();
          });
          $(".foo").click ( function () {
              var obj = $(this);
              var children = obj.children();
              $(this).children().toggle (500);
          });

      });
    </script>


</head>
<body>
  <h1>show all</h1>
  <ul>
    <li class="foo">item 1
       <ul> 
         <li class="bar">sub-item 1</li>
         <li class="bar">sub-item 2</li>
       </ul>
    </li>
    <li class="foo">item 2
       <ul> 
         <li class="bar">sub-item 1</li>
         <li class="bar">sub-item 2</li>
       </ul>
    </li>
    <li class="foo">item 3
       <ul> 
         <li class="bar">sub-item 1</li>
         <li class="bar">ysub-item 2</li>
       </ul>
    </li>
  </ul>
</body>
</html>


$（函数（）{
$（“h1”）。单击（函数（）{
var子项=$（“.bar”）；
$（“.bar”）.show（）；
});
$（“.foo”）。单击（函数（）{
var obj=$（本）；
var children=obj.children（）；
$（this.children（）.toggle（500）；
});
});
全部展示

第1项

子项1
子项2


第2项

子项1
子项2


第3项

子项1
ysub项目2



您正在隐藏元素，$（this）.children（）
选择特定.foo
元素中的元素。

如果某个可见元素的任何祖先被隐藏，那么该元素仍将被隐藏，因此$（'.foo'）.show（）
无效
做

顺便说一句，标题元素（
）不是按钮；）我建议使用不同的方法。
您正在隐藏元素，$（此）。children（）
选择特定.foo
元素中的元素。

如果某个可见元素的任何祖先被隐藏，那么该元素仍将被隐藏，因此$（'.foo'）.show（）
无效
做

顺便说一句，标题元素（
）不是按钮；）我建议使用不同的工具。
您需要调整h1单击以执行以下操作：
$("h1").click(function() {
    $(".foo").children().show();
});

您的.foo
单击隐藏了ul
列表，其中包含.bar
元素
示例。
您需要调整h1单击以执行以下操作：
$("h1").click(function() {
    $(".foo").children().show();
});

您的.foo
单击隐藏了ul
列表，其中包含.bar
元素
示例。
您遇到的问题是此函数：
      $(".foo").click ( function () {
          var obj = $(this);
          var children = obj.children();
          $(this).children().toggle (500);
      });

正在隐藏包含您的LI项的UL项，因此即使您调用$（“.bar”）.show（）
它们也不会显示，因为它们的父UL项设置为显示：无。
您遇到的问题是此函数：
      $(".foo").click ( function () {
          var obj = $(this);
          var children = obj.children();
          $(this).children().toggle (500);
      });

正在隐藏包含您的LI项目的UL项目，因此即使您正在调用$（“.bar”）.show（）
它们也不会显示，因为它们的父UL项目设置为显示：无。
请尝试以下操作：
$("h1").click ( function () {
              var subitems = $(".bar");
              $(".bar").parent().show();
          });

希望有帮助。
试试这个：
$("h1").click ( function () {
              var subitems = $(".bar");
              $(".bar").parent().show();
          });

希望有帮助。
这是因为当你点击一个foo:）时，你隐藏的是ul而不是li
$（this.children（）.toggle（500）应该是$（this）.find（'li.bar'）.toggle（500）
这是因为当你点击一个foo时，你隐藏的是ul而不是li:）
$（this.children（）.toggle（500）应该是$（this）.find（'li.bar'）.toggle（500）
我同意不应该是按钮，我只是在本例中使用它。我同意不应该是按钮，我只是在本例中使用它