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

我想隐藏html标签内的文本，这个html标签内部的问题是文本没有包裹在任何标签内，所以这让我想知道如何隐藏文本。这里是我的代码：隐藏没有html标签的文本父母被隐藏jQuery

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

来源

2017-09-13 Shell Suite

所以，你要隐藏的整个身体？ –

如果没有标签，你不能'隐藏'style/css。 – Dellirium

@ParagJadhav不，我只想隐藏文字 –

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

注意，这种方法是行不通的，除非你对strong和i标签display: block;，因为这些都是行内默认。 text-indent不适用于内联元素。

来源

2017-09-13 07:57:11 OptimusCrime

是的，我希望能够移出文本并再次在文本中移动，您是否可以提供工作代码？ –

@ShellSuite提供了一个最简单的例子。 – OptimusCrime

@ShellSuite OptimusCrime（酷的名字）给你的选择。如果你能够接受包装文本，那么做起来并不难。只要让我们知道你是否可以处理包装或不包装。还有一个选项可以隐藏和显示没有包装的文本，但我仍然没有得到你想要隐藏的文本？ –

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

来源

2017-09-13 07:59:30

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

回答

相关问题