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

これを試して：

<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; で動作するはずです。

編集: text-indent:none; を変更します。テキストインデントへ:0px;

Answer 3

以下は、必要に応じて機能するようです。

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 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属性を使用して、外側のリストではなく並べ替えることができます。