jQuery 没有显示隐藏的表格内容 [关闭]答案

【问题标题】：jQuery is not revealing hidden table content [closed]jQuery 没有显示隐藏的表格内容 [关闭]
【发布时间】：2021-12-28 17:55:23
【问题描述】：

我有一个项目列表，其中每个项目都有相关的子项目。我想隐藏子项目，除非单击与它们关联的列表中的项目。但是单击主要项目不会展开该组。有人可以指出我的错误吗？ JSfiddle is here。代码如下

<style> .show-kids {display:none;} </style>

<tr>
 <td class="main-group">123</td>
</tr>  
<tr>
 <td>
  <table class="show-kids kids-123">
   <tr><td>123.111</td></tr>
   <tr><td>123.222</td></tr>
   <tr><td>123.333</td></tr>
  </table>
 </td>
</tr>

<script>
 $('.main-group').click(function(e) {  
    var text = $(this).text();
    $(".kids-"+text).css("display", "block");
  });
</script>

【问题讨论】：

问题是因为您的 HTML 格式错误。您需要将最外层的tr 放在table 中：jsfiddle.net/mg9op7bf。投票结束是一个印刷问题，
另请注意，您使用的方法并不理想。更好的方法是使用 DOM 遍历方法将元素相互关联，如下所示：jsfiddle.net/mg9op7bf/2

标签： jquery hide

【解决方案1】：

你有：

<tr>
 <td class="main-group">123</td>
</tr>  
<tr>
 <td>
  <table class="show-kids kids-123">
   <tr><td>123.111</td></tr>
   <tr><td>123.222</td></tr>
   <tr><td>123.333</td></tr>
  </table>
 </td>
</tr>

但你需要：

<table><!-- open the table -->
<tr>
 <td class="main-group">123</td>
</tr>  
<tr>
 <td>
  <table class="show-kids kids-123">
   <tr><td>123.111</td></tr>
   <tr><td>123.222</td></tr>
   <tr><td>123.333</td></tr>
  </table>
 </td>
</tr>
</table><!-- close the table -->

Fiddle with this solution is available at https://jsfiddle.net/jhfrench/qzb1wfkt/

另外，考虑这种方法：

$(function() {
  $('.headers_and_details').on('click', '.header', function(e) {
    $(this).siblings('table').each(function() {
      //if it's hidden, show it; if it's shown, hide it
      $(this).toggleClass('hidden-details');
    });
  });
});

.header {
  cursor: pointer;
}

.hidden-details {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="headers_and_details">
  <tr>
    <td>
      <span class="header">123</span>

      <table class="hidden-details">
        <tr>
          <td>123.111</td>
        </tr>
        <tr>
          <td>123.222</td>
        </tr>
        <tr>
          <td>123.333</td>
        </tr>
      </table>
    </td>
  </tr>

  <tr>
    <td>
      <span class="header">456</span>

      <table class="hidden-details">
        <tr>
          <td>456.111</td>
        </tr>
        <tr>
          <td>456.222</td>
        </tr>
        <tr>
          <td>456.333</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

此方法使用jQuery's siblings() method 来识别要显示的细节，并使用the toggleClass() method 来处理细节的显示和隐藏（单击标题一次显示；再次单击该标题隐藏）。

您可以在https://jsfiddle.net/jhfrench/L1nkeqvo/14/ 上查看此方法的工作演示

您的场景也可能是the dl element 的一个很好的用例。

【讨论】：