javascript - 仅隐藏/显示内部文本而不是 图标标签

Question

在 jQuery 中，我需要隐藏/显示 anchor 标记的内部文本。这是 html :

<div id="side_bar">
  <ul>
    <li><a href="#"><i class="fa  fa-fw fa-cog"></i>General Settings</a></li>
    <li><a href="#"><i class="fa  fa-fw fa-cog"></i>Other Settings</a></li>
    <li><a href="#"><i class="fa  fa-fw fa-user"></i>User</a></li>
  </ul>
</div>

在按钮上单击我需要隐藏/仅显示内部文本 General Settings , Settings , User .

我尝试过这个:

$.each($('#side_bar').find('ul').find('li'), function (key, value) {
  $(this).find('a').contents().get(0).nodeValue.hide();
}); 

但它不起作用。

在控制台中出现此错误::

TypeError: $(...).find(...).contents(...).get(...).nodeValue is null
    $(this).find('a').contents().get(0).nodeValue.hide();

我需要结果来仅隐藏显示 <a>标签的内部文本，而不是图标。我尝试制作折叠侧边栏菜单。

NOTE::我不需要添加 <span>进入菜单。

Answer 1

您可以通过 span 来换行文本并使用简单的选择器，例如:

$('#side_bar li a span')

希望这有帮助。

$('#toggle-display').on('click', function(){
  $('#side_bar li a span').toggle();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<button id='toggle-display'>Toggle display</button>
<div id="side_bar">
  <ul>
    <li><a href="#"><i class="fa  fa-fw fa-cog"></i><span>General Settings</span></a></li>
    <li><a href="#"><i class="fa  fa-fw fa-cog"></i><span>Other Settings</span></a></li>
    <li><a href="#"><i class="fa  fa-fw fa-user"></i><span>User</span></a></li>
  </ul>
</div>