下拉菜单 - 重新加载时保存选项
我需要创建弹出式语言下拉菜单，其中包含国家/地区名称，标志和指向网站语言版本的链接。用户选择菜单项后 - 它应该将您带到所需的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萌萌
<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
随时随地看视频慕课网APP
相关分类
JavaScript