我需要创建弹出式语言下拉菜单，其中包含国家/地区名称，标志和指向网站语言版本的链接。用户选择菜单项后 - 它应该将您带到所需的URL（页面的语言版本），并且此选项应在新页面上保持可见（重新加载后）。菜单示例 - https://prnt.sc/sjumj8 （https://www.farfetch.com/shopping/women/items.aspx)以下是我试图创建的示例：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>
1 回答
Cats萌萌
TA贡献1805条经验 获得超9个赞
<ul>tag 元素永远不会触发事件，您甚至不能使用，因为它没有实际的 attribue。.changeli.val()value
所以你需要解决一些，像这样的东西
$(document).ready(() => {
// cache selectors for better performance
const listItem = $("ul");
const listSelected = listItem.find('.init');
const allOptions = listItem.children('li:not(.init)');
listItem.on('click', '.init', () => {
listItem.children('li:not(.init)').toggle();
});
listItem.on('click', 'li:not(.init)', (e) => {
const that = $(e.target);
const setHTML = that.html();
allOptions.removeClass('selected');
that.addClass('selected');
listSelected.html(setHTML);
allOptions.toggle();
sessionStorage.setItem('SelItem', setHTML);
});
const selectItem = $("#select-lang");
const storedItem = sessionStorage.getItem('SelItem');
if (storedItem) {
listSelected.html(storedItem);
}
});
这应该按预期工作，将目标HTML存储在会话存储中<li>SelItem
添加回答
举报
0/150
提交
取消