Question

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

有什么建议吗？我知道可能有其他方法可以完成类似的事情，但我正在利用这个机会来了解更多有关jquery的信息，并试图弄清楚为什么这个特殊的例子不起作用。

以下是行动：http://hortitude.com/samples/jquery_show_trouble.html

代码......

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

Answer 1

您隐藏了<ul>元素，$(this).children()选择了特定<ul>元素中的.foo元素。
如果隐藏了可见元素的任何祖先，则该元素仍将被隐藏，因此$('.foo').show()无效。

待办事项

$(".foo").children().show();

顺便说一下。标题元素（<h1>）不是按钮;）我建议使用不同的东西。

Answer 2

您需要调整h1点击以执行以下操作：

$("h1").click(function() {
    $(".foo").children().show();
});

您的.foo点击隐藏了包含ul元素的.bar列表。

jsfiddle上的示例。

Answer 3

你遇到的问题是这个功能：

      $(".foo").click ( function () {
          var obj = $(this);
          var children = obj.children();
          $(this).children().toggle (500);
      });

隐藏包含LI项目的UL项目，因此即使您正在调用$(".bar").show()，它们也不会显示，因为它们的父UL项目设置为display：none。

Answer 4

试试这个：

$("h1").click ( function () {
              var subitems = $(".bar");
              $(".bar").parent().show();
          });

希望它有所帮助。

Answer 5

那是因为当你点击foo时你隐藏了ul而不是li：）

$(this).children().toggle (500);应为$(this).find('li.bar').toggle (500);

jQuery无法显示隐藏的元素

5 个答案: