我需要?jiǎng)?chuàng)建彈出式語(yǔ)言下拉菜單，其中包含國(guó)家/地區(qū)名稱(chēng)，標(biāo)志和指向網(wǎng)站語(yǔ)言版本的鏈接。用戶選擇菜單項(xiàng)后 - 它應(yīng)該將您帶到所需的URL（頁(yè)面的語(yǔ)言版本），并且此選項(xiàng)應(yīng)在新頁(yè)面上保持可見(jiàn)（重新加載后）。菜單示例 - https://prnt.sc/sjumj8 （https://www.farfetch.com/shopping/women/items.aspx)以下是我試圖創(chuàng)建的示例：https://jsfiddle.net/Okean/8x0atLpy/62/<body> <ul class="list-unstyled" id="select-lang"> <li class="init">[SELECT]</li> <li data-value="value 1"> <a href="#"> <img src="https://image.flaticon.com/icons/svg/197/197615.svg"> Language 1 </a> </li> <li data-value="value 2"> <a href="#"> <img src="https://image.flaticon.com/icons/svg/197/197386.svg">Language 2 </a> </li> <li data-value="value 3"> <a href="#"> <img src="https://image.flaticon.com/icons/svg/197/197484.svg">Language 3 </a> </li> <li data-value="value 4"> <a href="#"> <img src="https://image.flaticon.com/icons/svg/197/197380.svg">Language 4 </a> </li> </ul></body><script> $("ul").on("click", "li:not(.init)", function() { allOptions.removeClass('selected'); $(this).addClass('selected'); $("ul").children('.init').html($(this).html()); allOptions.toggle(); }); window.onload = function() { var selItem = sessionStorage.getItem("SelItem"); $('#select-lang').val(selItem); } $('#select-lang').change(function() { var selVal = $(this).val(); sessionStorage.setItem("SelItem", selVal); });</script> <style> body{ padding:30px; } ul { height: 30px; width: 150px; border: 1px #000 solid; } ul li { padding: 5px 10px; z-index: 2; } ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; } ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; } li.init { cursor: pointer; } a#submit { z-index: 1; } li img { width: 20px; }</style>
下拉菜單 - 重新加載時(shí)保存選項(xiàng)
冉冉說(shuō)
2022-08-27 09:27:45
