<ul> <li> Hide/show 只有内部文本没有 <i> 图标标签

Question

在jQuery中我需要hide/show锚标签的内部文本。这是 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>

单击按钮我需要 hide/show 仅内部文本 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();

我需要结果只隐藏 show <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>

Answer 2

这里有一个严格基于您现有描述的解决方案。

首先是一个带有点击事件处理程序的按钮，因为您说您希望在点击按钮时发生这种情况。其次，您只想隐藏 "inner text"。我认为这意味着您不想隐藏 <i> 标签。最简单的方法是将文本放入带有 class 的 span 中，然后很容易定位 - 所有 find 的东西都是完全不需要的，你可以使用一个简单的选择器：

<div id="side_bar">
  <ul>
        <li><a href="#"><i class="fa  fa-fw fa-cog"></i><span class="menuText">General Settings</span></a></li>
        <li><a href="#"><i class="fa  fa-fw fa-cog"></i><span class="menuText">Other Settings</span></a></li>
        <li><a href="#"><i class="fa  fa-fw fa-user"></i><span class="menuText">User</span></a></li>
  </ul>
</div>
<button id="myButton" type="button">Click to hide</button>

$(function() {
  $("#myButton").click(function() {
    $("#side_bar li a .menuText").hide();
  });
});

或者，根据您的上次更新，您确定不能't/won在标记中添加 <span>，您可以隐藏文本。我还包含了一个功能，可以在单击按钮时保存和恢复文本，方法是将文本保存在锚点的 data- 属性中：

<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>
<button id="myButton" type="button">Click to hide</button>

$(function() {
  $("#myButton").click(function() {
    $("#side_bar li a").each(function() {
        var el = $(this);
        if (el.text() != '') {
            el.data('originalText', el.text());
            el.text('');
        }
        else {
            el.text(el.data('originalText'));
        }
    });
  });
});

在这里 fiddle 工作：http://jsfiddle.net/xcxv682h/1/

<ul> <li> Hide/show 只有内部文本没有 <i> 图标标签

<ul> <li> Hide/show inner text only not <i> icon tag

javascript

anchor

jquery

show-hide

buttonclick