javascript - HTML 列表隐藏顶层

Question

我有一个这样的清单，

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

我怎样才能只隐藏外部列表（key1，key2，key3）隐藏而不删除，因为排序仅在键上完成。

结果应该是

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

感谢您的支持

Answer 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();
});

Answer 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 小提琴演示。

Answer 3

试试这个：

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

​</p>

CSS：

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

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

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

Answer 4

作为先前答案的替代方案，如果您有权访问并且可以控制 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属性而不是外部列表进行排序。