隱藏沒有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

回答

相關問題