Создание выпадающего меню, содержащие кнопки радио

Question

Так вот понятие я хотел достичь: sketch

Для тех, кто не может просматривать изображение, у меня есть выпадающее меню (титулованная «Presets»), содержащий список переключателей, каждый из которых представляет собой различный пресет, где при наведении/выборе на радиокнопке предварительная настройка, соответствующая этой радиокнопке, просматривается (при наведении курсора на кнопку) и реализуется (при выборе переключателя) на другом div.

<nav id="topNav"> 
<ul style="list-style: none;"> 
<li> 
    <a href="#" title="Nav Link 2">presets</a> 
    <ul style="list-style: none;"> 
    <li><input type="radio" class="rb" id="pr1" name="preset" value="1" checked="checked">Preset 1</li> 
    <li><input type="radio" class="rb" id="pr2" name="preset" value="2">Preset 2</li> 
    <li><input type="radio" class="rb" id="pr3" name="preset" value="3">Preset 3</li> 
    <li><input type="radio" class="rb" id="pr4" name="preset" value="4">Preset 4</li> 
    </ul> 
</li> 

 <div id="a"></div> 

Here моя попытка выполнения этого. Есть несколько вещей, которые у меня возникли проблемы по устранению неисправностей (так что мне нужно для устранения неполадок в себя, прежде чем я могу устранить мои проблемы):

1. меню, кажется, падение вниз по умолчанию каждый раз я обновите страницу. Есть ли способ, которым мое меню может быть пресечено при освежении?

2. Из моей скрипки вы заметили на моем CSS, что я пытаюсь дать свои характеристики наведения переключателей (как способ предварительного просмотра своих подарков на элементе div), но безрезультатно. Я полагаю, что мне нужно будет использовать сценарии для этого, не так ли? В частности, когда курсор мыши наводится на пресет, элемент div мгновенно выражает детали этой предустановки (в данном случае другой цвет), и когда выбран пресет, элемент div изменит текущий цвет на тот, что выбранный пресет.

3. Я планирую расширить это путем выбора пользователем предустановки для элемента div и отправки формы для ее сохранения в базе данных. Учитывая функциональность, которую я хочу, у меня возникнут проблемы с этим с точки зрения совместимости с браузером?

Answer 1

1. Вы можете установить display:none на ul элемент, который вы используете в качестве выпадающего списка.
2. Наиболее практичным подходом для этого было бы добавить mouseenter и mouseleave прослушивателей событий для каждого из li элементов. В поле mouseenter вы задаете цвет предварительного просмотра div тому, который связан с элементом li, на котором произошло событие. В поле mouseleave вы вернетесь к исходному цвету.
3. Не должно быть проблем для большинства браузеров.

Здесь представлена ​​измененная версия вашего fiddle, демонстрирующая желаемое поведение.