<ul><li>仅隐藏/显示内部文本，不隐藏

Question

In jQuery I need to hide/show inner text of anchor tag. Here is 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>

on a button click I need to hide/show only inner text General Settings , Settings , User .

I tried this :

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

but it's not working.

got this error in console ::

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

I need result to only hide show <a> tag's inner text, not the icon. I try to make collapse sidebar menu.

NOTE :: I must not need to add <span> in to menu.

Answer 1

You could wrap you text by span 's and use simple selector like :

$('#side_bar li a span')

Hope this helps.

 $('#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

Here's a solution strictly based on your existing description.

First there is a button, with a click event handler, since you say you want this to happen on a button click. Second, you only want to hide the "inner text". I take this to mean you don't want to hide the <i> tag. The easiest way is to put the text into a span with a class, then it's straightforward to locate - all the find stuff is completely unnecessary, you can use a simple selector:

<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();
  });
});

OR, as per your last update, you're certain you can't/won't add a <span> into the markup, you can just hide the text. I've also included a feature to save and restore the text later when the button is clicked, by keeping the text in a data- attribute of the anchor:

<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'));
        }
    });
  });
});

Working fiddle here: http://jsfiddle.net/xcxv682h/1/