Question

我有一个字母列表，每个字母都在li标签内：

<ul>
    <li class="letter">A</li>
    <li class="letter">B</li>
    <li class="letter">C</li>
    <li class="letter">D</li>
</ul>

问题是如何隐藏这些字母（A，B，C，D）而不隐藏li标签本身，因为它已经有了风格，我不想失去它。以及如何使用javaScript函数使它们可见？

PS：列表由javaScript函数创建：

                var ul = document.createElement('ul');
                ul.setAttribute('id','letters');
                var txt = txtword.value;
                var t, tt;
                var word = new Array();

                for (i=0;i<txt.length;i++)
                    word[i] = txt[i];


                document.getElementById('answer_div').appendChild(ul);
                word.forEach(wordletters);

                function wordletters(element, index, arr) {
                    var li = document.createElement('li');
                    li.setAttribute('class','item');

                    ul.appendChild(li);

                    t = document.createTextNode(element);

                    li.innerHTML=li.innerHTML + element;
                }

提前致谢。

Answer 1

考虑visibility属性：

＆＃13;

.letter:nth-child(2) {
  visibility: hidden;
}

＆＃13;

<ul>
  <li class="letter">A</li>
  <li class="letter">B</li>
  <li class="letter">C</li>
  <li class="letter">D</li>
</ul>

＆＃13;

如果你想保留子弹，可以考虑使用一些小流量的小宽度。

＆＃13;

li {
 list-style:inside;
}

.letter:nth-child(2) {
  width:5px;
  overflow:hidden;
  white-space:nowrap;
}

＆＃13;

<ul>
  <li class="letter">A</li>
  <li class="letter">B</li>
  <li class="letter">C</li>
  <li class="letter">D</li>
</ul>

＆＃13;

然后简单地使用一个可以用JS添加/删除的类：

＆＃13;

document.querySelectorAll('.letter')[2].classList.add('hide');

＆＃13;

li {
 list-style:inside;
}

.hide{
  width:5px;
  overflow:hidden;
  white-space:nowrap;
}

＆＃13;

<ul>
  <li class="letter">A</li>
  <li class="letter">B</li>
  <li class="letter">C</li>
  <li class="letter">D</li>
</ul>

＆＃13;

Answer 2

    <ul>
        <li class="letter"><input style="display:none;" type="text" id="A" value="A"></li>
        <li class="letter"><input style="display:none;" type="text" id="B" value="B"></li>
        <li class="letter"><input style="display:none;" type="text" id="C" value="C"></li>
        <li class="letter"><input style="display:none;" type="text" id="D" value="D"></li>
    </ul>

您可以使用以下功能显示li数据。

function show_li_data(id){
$("#"+id).show();
}

Answer 3

一种方法可以简单地将A，B，C，D包裹在这样的范围内

<ul>
    <li class="letter"><span>A<span></li>
    <li class="letter"><span>B<span></li>
    <li class="letter"><span>C<span></li>
    <li class="letter"><span>D<span></li>
</ul>

然后

li span{
display:none
}

以下是codepen：https://codepen.io/anon/pen/oEmJLP

Answer 4

修改了答案。尝试使用text-indent;在你的情况下，只需添加：

风格=＆＃34;文本缩进：-9999px;＆＃34;在每个li标签中

Answer 5

解决方案是：

                function wordletters(element, index, arr) {
                var li = document.createElement('li');
                li.setAttribute('class','item');

                ul.appendChild(li);
                var span = document.createElement('span');
                li.appendChild(span);


                span.innerHTML=span.innerHTML + element;
            }

此函数将在li标签内创建一个span，因此我可以隐藏跨度而不隐藏li标签..

感谢大家的时间^ _ ^

Answer 6

您应该按类名选择这些元素，并设置display：none。

document.getElementByClassName（“letter”）。style.display ='none' document.getElementByClassName（“letter”）。style.display ='block'

如何使用javaScript或Css隐藏li标签的值

6 个答案: