Question

在jQuery中我需要隐藏/显示锚标记的内部文本。这是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')

希望这有帮助。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

首先有一个按钮，带有一个点击事件处理程序，因为你说你希望在按钮点击时发生这种情况。其次，你只想隐藏“内部文本”。我认为这意味着您不想隐藏<i>标记。最简单的方法是将文本放入带有类的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();
  });
});

或者，根据您的上次更新，您确定不能/不会在标记中添加<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'));
        }
    });
  });
});

在这里工作小提琴：http://jsfiddle.net/xcxv682h/1/

<ul> <li>仅隐藏/显示内部文本<i>图标标记

2 个答案: