Question

我想隐藏html标签内的文本，这个html标签内的问题文本没有包装在任何标签内，所以它让我想知道如何隐藏文本。这是我的代码：

<ul class="nav items"> 
   <li class="nav item ">
      <strong>
        <i class="ion-speedometer"></i> Dashboard
      </strong>
   </li>
   <li class="nav item"><a href="#"><i class="ion-model-s"> </i>Delivery Order History</a></li>
   <li class="nav item vendor-guide  ">
      <a href="#"><i class="ion-help"> </i>Help Guide</a>
   </li>
   <li class="nav item" id="collapse-list">
      <div class="seperator">
         <span class="outer-line"></span>
         <span class="fa fa-lg fa-angle-double-left" id="arrow-collapse" aria-hidden="true" style="margin:10px 0"></span>
         <span class="fa fa-lg fa-angle-double-right" id="arrow-show" aria-hidden="true" style="margin:10px 0;display:none;"></span>
         <span class="outer-line"></span>
      </div>
   </li>
</ul>

从li html标记下方的代码中可以看到，有一个文本html标记容器，strong或a，除了文本外，还有一个图标。这是我的jQuery代码：

$('#arrow-collapse').click(function() {
    //hide the text
 });
$('#arrow-show').click(function() {
    //show the text
});

Answer 1

display和visibility属性定位该HTML标记内的内容/子项。没有办法只隐藏标签内的文本，也不能隐藏其他孩子。您可以尝试通过执行text-indent: -999999px;将文本移动到可见内容之外来“隐藏”文本，然后调整其他子标记的位置。

这里的另一个选择是将文本包装在标记中，例如span并隐藏它。

最小例子*：

div {
    text-indent: -9999px;
}
div strong,
div i {
  display: block;
  text-indent: 9999px;
}

<div>
Outside text
<strong>strong text</strong>
<i>Itallic text</i>
</div>

请注意，除非display: block;和strong标记上有i，否则此方法无效，因为默认情况下这些标记是内联的。 text-indent不适用于内联元素。

Answer 2

$('#arrow-collapse').click(function() {
   $('#arrow-collapse').text("");
});
$('#arrow-show').click(function() {
   $('#arrow-show').text("Text");
});

或

<span class="fa fa-lg fa-angle-double-left" id="arrow-collapse" aria-hidden="true" style="margin:10px 0">
   <span class="collapse-text">Collapse Text</span>
</span>
<span class="fa fa-lg fa-angle-double-right" id="arrow-show" aria-hidden="true" style="margin:10px 0;display:none;">
   <span class="show-text">Show Text</span>
</span>

然后

$('#arrow-collapse').click(function() {
   $('.collapse-text').show(); //for example
});
$('#arrow-show').click(function() {
   $('.show-text').show(); //for example
});

隐藏没有html标签的文本，父隐藏jQuery

2 个答案: