HTML 列表隐藏顶层答案

【问题标题】：HTML List Hide Top levelHTML 列表隐藏顶层
【发布时间】：2012-04-24 21:31:42
【问题描述】：

我有一个这样的列表，

键1
- 比利时
- 法国
键2
- 德国
键3
- 意大利
- 美国

如何只隐藏外部列表（key1、key2、key3）隐藏而不是删除，因为排序仅在键上完成。

结果应该是

比利时
法国
德国
意大利
美国

感谢支持

【问题讨论】：

标签： javascript html

【解决方案1】：

这应该可以解决问题：

HTML：

<ol>
    <li>Key1
        <ul>
            <li>Belgium</li>
            <li>France</li>
        </ul>
    </li>
    <li>Key2
        <ul>
            <li>Germany</li>
        </ul>
    </li>
    <li>Key3
        <ul>
            <li>Italy</li>
            <li>USA</li>
        </ul>
    </li>
</ol>

JS：

$(function() {
    $("ol ul li").each(function() {
        $("ol").append("<li>" + $(this).html() + "</li>");
    });
    $("ol > li:has(ul)").hide();
});

【讨论】：

我忘了说我的HTML，JS编程能力很有限我猜这个功能是Jquery？我在脚本部分复制了这个函数，但似乎没有任何事情发生
是的，那就是 jQuery。在您的<head></head> 中添加此行：<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

【解决方案2】：

以下似乎可以按您的要求工作。

HTML：

<ol>
    <li>Key one
        <ul>
            <li>Belgium</li>
            <li>France</li>
        </ul></li>
    <li>Key two
        <ul>
            <li>Germany</li>
        </ul></li>
    <li>Key three
        <ul>
            <li>Italy</li>
            <li>USA</li>
        </ul></li>
</ol>

CSS：

ol > li {
    font-size: 0;
}

ol > li li {
    font-size: 16px;
}

JS Fiddle demo.

【讨论】：

演示不行，还是你的代码不行？请记住，我在猜测您的 HTML。
什么是这样的我仍然可以看到箭头，似乎有 css 格式的列表因此我仍然可以看到项目符号但看不到“关键”字
告诉我你看到了什么。显示相关的 HTML 和该 HTML 的 CSS。将SSCCE JS Fiddle demo 放在一起，这样我们就可以使用您所拥有的，而不是猜测您在做什么。帮助我们来帮助你。

【解决方案3】：

作为先前答案的替代方案，如果您有权访问并且可以控制 HTML 的外观，则可以改为创建如下列表：

<ul>
    <li sort="Key1">Belgium</li>
    <li sort="Key1">France</li>
    <li sort="Key2">Germany</li>
    <li sort="Key3">Italy</li>
    <li sort="Key3">USA</li>
</ul>

然后您可以使用自定义 sort 属性而不是外部列表进行排序。

【讨论】：

【解决方案4】：

试试这个：

<ul>
<li>Key one
    <ul>
        <li>Belgium</li>
        <li>France</li>
    </ul></li>
<li>Key two
    <ul>
        <li>Germany</li>
    </ul></li>
<li>Key three
    <ul>
        <li>Italy</li>
        <li>USA</li>
    </ul></li>

CSS：

ul li {
    text-indent: -3000px;
    display:block;
}
ul li ul li {
    text-indent: 0px;
}

希望它有效，尚未测试...但应该适用于 text-indent: -3000px;

编辑：更改文本缩进：无；到文本缩进：0px；

【讨论】：