Блог

У меня есть 2 типа меню выбора в jquery и jquery-ui: (а) обычный выбор опции формы и (б) вложенные списки, преобразованные в меню с помощью метода menu ( ). Тип (a) не является вложенным, а тип (b) является вложенным (очевидно). Это то, что я имею в виду:

Введите (a) html

 <form action='#'>
    <fieldset>
        <select name='myselect' class='myselect'>
            <option value='x'>x</option>
            <option value='y'>y</option>
        </select>
    </fieldset>
</form>
  

Введите (a) jquery

 $( ".myselect" ).selectmenu({ select: function( ){ ... } });
  

Введите (b) html

 <ul class='mymenu'>
    <li>
        <div>Label 1</div>
        <ul>
            <li><div>Label 1.1</div></li>
            <li><div>Label 1.2</div></li>
            <li><div>Label 1.3</div>
                <ul>
                    <li><div>Label 1.3.1</div></li>
                    <li><div>Label 1.3.2</div></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
  

Введите (b) jquery

 $( '.mymenu' ).menu({ select: function( ){ ... } });
  

Вы заметите, что внешний вид этих 2 элементов не одинаков, хотя вложенный список содержит только 1 элемент верхнего уровня, поэтому в принципе они могут выглядеть одинаково.

Как я могу сделать вложенное меню выбора, введите (b) выше, только с одним элементом верхнего уровня, выглядящим так же (через некоторый css, я думаю), как обычное меню выбора? Таким образом, цель состоит в том, чтобы иметь обычный внешний вид меню выбора, но с вложенными меню.

Если вы имеете в виду, как выровнять элементы по вертикали, просто удалите поля и отступы или отрегулируйте их в соответствии

 .mymenu, .mymenu li, .mymenu ul{margin:0; padding:0}
.mymenu li{list-style:none}  

 <ul class='mymenu'>
    <li>
        <div>Label 1</div>
        <ul>
            <li><div>Label 1.1</div></li>
            <li><div>Label 1.2</div></li>
            <li><div>Label 1.3</div>
                <ul>
                    <li><div>Label 1.3.1</div></li>
                    <li><div>Label 1.3.2</div></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>