Как заставить <ul> действовать как <ol> (с цифрами вместо маркеров)?

Question

Это печальный вопрос, но я не вижу другого выхода.

По сути, я использую панель Kendo UI для создания расширяемых списков. Проблема в том, когда вы используете <ol> как подсписок, функциональность панели не работает.

Пример в Fiddle: http://jsfiddle.net/b3y62uzr/2/

HTML:

<ul id="panelBar1">
    <li>
        Item 1
            <ul>
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
            </ul>
    </li>
    <li>Item 2
            <ol>
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
            </ol>
    </li>
</ul>

Вы можете видеть, что первый элемент можно правильно развернуть / свернуть, но второй элемент всегда открыт и с ним невозможно взаимодействовать.

В моем приложении мне нужно, чтобы подсписок в расширенном разделе был пронумерован, а не маркирован. (Я изменил стиль панели инструментов Kendo, чтобы показать маркеры).

Таким образом, вопрос: можно ли сделать <ul> использовать цифры вместо пуль?

Редактировать: используйте эту скрипку, если хотите получить ответ: https://jsfiddle.net/1h2kLqu4/1/

Answer 1

Да, вы можете использовать list-style-type Свойство CSS в неупорядоченных списках.

Вы бы нацелены на это так:

ul li{
    list-style-type: decimal;
}

Вот скрипка, показывающая вам результат.