HTML列表中隱藏頂級

我有這樣一個名單，HTML列表中隱藏頂級

鍵1
- 比利時
- 法國
鍵2
- 德國
鍵3
- 意大利
- 美國

如何隱藏只有外部列表（KEY1，KEY2，KEY3）隱藏不刪除，因爲排序上的按鍵只是做了。

Resault應該

比利時
法國
德國
意大利
美國

多謝支持

來源

2012-04-24 Maro

任何源代碼？ – sp00m 2012-04-24 13:07:51

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

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。

來源

2012-04-24 13:10:19

不，它不工作！我仍然可以看到結構 – Maro 2012-04-24 13:14:50

該演示不起作用，或者您的代碼不起作用？銘記我猜測你的HTML。 – 2012-04-24 13:18:43

什麼是看到這樣的東西我仍然可以看到箭頭，似乎有CSS格式的列表，因此我仍然可以看到子彈，但不是「關鍵」字 – Maro 2012-04-24 13:24:35

這應該做的伎倆：

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

來源

2012-04-24 13:14:01 sp00m

我忘了說我有一個非常有限的HTML，JS編程技巧我猜這個函數是jquery的？我在腳本部分複製了這個函數，但似乎沒有任何好處 – Maro 2012-04-24 13:22:58

是的，那就是jQuery。在您的''中添加以下行：'' – sp00m 2012-04-24 13:36:56

試試這個：

<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：0px;

來源

2012-04-24 13:23:45 Adriaan

正如先前答案的選擇，如果你有機會和可以控制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屬性進行排序而不是外部列表。

來源

2012-04-24 13:28:56 Armatus

HTML列表中隱藏頂級

回答

相關問題