Question

我有一个这样的清单，

键1
- 比利时
- 法国
密钥2
- 德国
密钥3
- 意大利
- USA

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

Resault应该是

比利时
法国
德国
意大利
USA

感谢您的支持

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

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>

CSS：

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

希望它有效，没有测试过......但是应该使用text-indent：-3000px;

编辑：更改text-indent：none; to text-indent：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属性进行排序，而不是外部列表。

HTML列表隐藏顶级

4 个答案: