Question

有人可以向我解释原因吗

$(".transaction_history_tab").hide();

不会同时隐藏

// Container
<tbody class="transaction_history_tab">
</tbody>

// In example this is inside the transaction_history_tab container
<div class="data-info-box">
   <span>NO DATA TO SHOW</span>
</div>

隐藏transaction_history_tab＆＃34;没有数据显示＆＃34;仍然出现。

＆＃13;

$(".transaction_history_tab").hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

// Without table tags around
<tbody class="transaction_history_tab">
  <div class="data-info-box">
    <span>NO DATA TO SHOW</span>
  </div>
</tbody>

＆＃13;

使用Rory

的答案

＆＃13;

$(".transaction_history_tab").hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
// With table tags around
<table>
  <thead>
    <tr>
      <td></td>
    </tr>
  </thead>
  <tbody class="transaction_history_tab">
    <tr> 
      <td>
        <div class="data-info-box">
          <span>NO DATA TO SHOW</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 1

此问题仅由无效的HTML引起。 tbody元素必须包含在table中。由于你的不是，它不会被渲染。如果在检查器中检查DOM，则可以看到此信息。 tbody也只能包含tr个元素。因此，孩子div也是一个问题，它应该包含在tr中，然后包含在td中。

由于tbody元素未呈现，且.transaction_history_tab不存在，因此无法隐藏。

要解决此问题，请更正您的HTML。在table周围添加tbody，包括tr周围的td和div，或完全删除tbody。

＆＃13;

$(".transaction_history_tab").hide();

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <thead>
    <tr>
      <td>This will be shown...</td>
    </tr>
  </thead>
  <tbody class="transaction_history_tab">
    <tr>
      <td>
        <div class="data-info-box">
          <span>NO DATA TO SHOW</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

可能因为没有表/行/单元格的结构tbody>div不是有效的HTML结构。

尝试使用此{JSFiddle https://jsfiddle.net/u58460ot

中的table>tbody>tr>td>div结构

或仅使用没有tbody的div作为父

Answer 3

<table>
 <tbody class="transaction_history_tab">
   <tr>
    <td>
     <div class="data-info-box">
       <span>NO DATA TO SHOW</span>
     </div>

    </td>
 </tr>
 </tbody>
</table>

尝试上面它会起作用......

Answer 4

您尚未在此处添加css，但您的css可能包含以下内容：

.data-info-box {
    visibility: visible;
}

需要更改为：

.data-info-box {
    visibility: inherit;
}

这是因为设置为“可见”的子元素仍将显示，即使其父元素为“隐藏”。将可见性设置为“继承”意味着子项将采用父项具有的任何可见性属性。

'继承'是可见性的默认设置，因此如果这是问题，则必须在css中手动将其设置为“可见”（或在js中动态设置）。

隐藏容器不会隐藏内容？

4 个答案: