htmlタグなしでテキストを隠すparent being hide jQuery

Question

htmlタグ内のテキストを非表示にしたい、このhtmlタグ内の問題はタグ内で囲まれていないので、テキストを隠す方法がわかりません。ここに私のコードです：あなたはli htmlタグの下に上記のコードから見ることができますstrongまたはaあるテキストhtmlタグのコンテナがあるよう

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

、テキストの横にアイコンがあります。

$('#arrow-collapse').click(function() { 
    //hide the text 
}); 
$('#arrow-show').click(function() { 
    //show the text 
}); 

Answer 1

displayとvisibility属性は、そのHTMLタグ内のコンテンツ/子供をターゲットにしています。ここに私のjQueryのコードです。タグ内のテキストだけを隠す方法はなく、他の子供も隠す方法はありません。 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はインライン要素では機能しません。

Answer 2

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