制作一個包含單選按鈕的下拉菜單

Question

所以這是我想要實現的概念： 草圖

對於那些無法查看圖像的人，我有一個下拉菜單（標題為“預設”），其中包含一個單選按鈕列表，每個單選按鈕代表一個不同的預設，在懸停/選擇單選按鈕時，該預設對應於該單選按鈕預覽按鈕（將鼠標懸停在按鈕上）並在其他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>

這是我執行此操作的嘗試。 我在進行故障排除時遇到了一些麻煩（因此，在解決問題之前，我需要先進行故障排除）：

1. 每次刷新頁面時，默認情況下菜單似乎都會下拉。 有什么方法可以使菜單在刷新后保持壓縮狀態嗎？

2. 從我的小提琴中，您會在CSS上注意到我正在嘗試使單選按鈕具有懸停特性（作為一種在div元素上預覽其呈現的方式），但無濟於事。 我想我需要為此使用腳本，對嗎？ 具體來說，當鼠標指針懸停在預設上時，div元素將立即表達該預設的詳細信息（在這種情況下為不同的顏色），並且當選擇了預設時，div元素會將其當前顏色更改為預設的顏色。選擇的預設。

3. 我計划通過讓用戶為div元素選擇一個預設並發送表單以將其保存到數據庫來對此進行擴展。 鑒於我想要的功能，我是否會在瀏覽器兼容性方面遇到麻煩？

Answer 1

1. 您可以在用作下拉菜單的ul元素上設置display:none 。
2. 這種最實用的方法是添加mouseenter和mouseleave事件偵聽到每個的li項。 在mouseenter ，將預覽div的顏色設置為與發生事件的li元素關聯的顏色。 在mouseleave您可以將其設置回原始顏色。
3. 對於大多數瀏覽器來說應該不是問題。

這是小提琴的修改版本，可顯示所需的行為。