3

一部のリスト項目<li>がデフォルトで css によって非表示になっているような順序付きリストがあります。ただし、これらはユーザーの行動に応じて (JavaScript を介して) 明らかになる可能性があります。

それらが明らかになった場合、リスト全体が順番通りになるように並べ替えられますが、それらが非表示の場合、リストは順番に途切れがありませんでした。

ページの読み込み時にリストにギャップが生じることを意味する場合でも、リストの各要素（非表示で始まる要素も含む）に固定番号を付けたいと思います（1. 2. 4. 5.など）

この場合、すべての要素が明らかになった場合、リストは要素の連続した番号のリストとしてのみ表示されます。

ここに私の問題を説明するjsfiddleがあります http://jsfiddle.net/hesxT/1/

どんな考えでもいただければ幸いです

4

5 に答える 5

3

http://jsfiddle.net/hesxT/6/

使用する...

visibility: hidden;
height: 0;

アイテムを非表示にします。次に、それらのプロパティを削除してアイテムを表示します。

そして、他の人が指摘したように、<div>ラッピングを削除し<li>ます 、それは必要ありません。

于 2012-11-20T04:00:18.843 に答える
1

li 要素には、数値リスト項目の値を設定するために使用できる属性 'value' があります。

<ol>
    <li value='1'>Item 1</li>
    <li value='3'>Item 3</li>
    <li value='4'>Item 4 </li>
    <li value='5'>Item 5</li>
</ol>
于 2012-11-20T03:53:25.557 に答える
0

あなたが説明している問題は Firefox 16 では見られません。しかし、以前のバージョンの Firefox と IE で発生しているようです (私は IE 7 のみをテストしました)。

したがって、クロスブラウザで動作するために必要なものは次のとおりです。

.hidden {
    position: absolute;
    height: 0;
    width: 0;
    overflow: hidden;
}

IE では、他の提案された回答を使用すると、非表示のクラスがスクリプトによって削除されたときに、非表示の要素の子要素が正しく表示されなくなります。

また、スクリーン リーダーは、非表示のコンテンツを期待どおりに表示する場合と表示しない場合がありますが、問題にはならない場合があります。

注:li要素を要素でラップすることは無効ですdiv。興味のある方は、その修正に関するこの質問を参照してください。

于 2012-11-20T03:51:24.207 に答える
0

リストで自動番号付けを使用する CSS と toggleClass を使用したアプローチを次に示します。

.hidden {
    height: 0px;
    overflow: hidden;
}

http://jsfiddle.net/AMvp8/

于 2012-11-20T04:19:45.957 に答える
0

私はあなたのコードにいくつかの変更を加えました。これをチェックして、

http://jsfiddle.net/hesxT/2/

コード：

$('li').each(function(i){
    $(this).html((i+1)+'. '+$(this).html());
});
$('#myform').change(function() {
    if ($('#reveal').attr('checked')){
        $('#hide').show();
    } else {
        $('#hide').hide();
    }
});
于 2012-11-20T03:43:44.630 に答える