隐藏没有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
});
的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
不适用于内联元素。
是的,我希望能够移出文本并再次在文本中移动,您是否可以提供工作代码? –
@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
});
所以,你要隐藏的整个身体? –
如果没有标签,你不能'隐藏'style/css。 – Dellirium
@ParagJadhav不,我只想隐藏文字 –