>我需要创建弹出语言下拉菜单，其中包含国家/地区名称，国旗和指向站点语言版本的链接。用户选择菜单项后 - 它应该将您带到所需的 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>
<ul>标签元素永远不会触发.change事件， 您甚至不能使用li.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);
}
});
这应该按预期工作，将目标<li>HTML 存储在会话存储的SelItem内