Javascript 如何创建显示选定变量的可悬停下拉菜单

我在寻找一些（可能很简单）的建议，但我在谷歌上找不到。我有一个可悬停的下拉菜单，例如：

/*下拉按钮*/
.btn{
背景色：#D6182D；
颜色：白色；
填充：8px；
字体大小：16px；
边界：无；
}
/*容器-需要定位下拉内容*/
.下拉列表{
位置：相对位置；
显示：内联块；
边界：10px；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时下拉链接的颜色*/
.下拉列表内容a：悬停{
背景色：#ddd；
}
/*悬停时显示下拉菜单*/
.下拉：悬停.下拉内容{
显示：块；
}
/*显示下拉内容时，更改下拉按钮的背景色*/
.下拉列表：hover.btn{
背景色：rgb（134,30,42）；
}

---

正如我看到的，您正在使用

和

另外，如果您希望在用户单击时进行重定向，则可以使用

希望这会对你有所帮助，如果你有任何疑问，我会很乐意帮助你：-）
因为我可以看到你正在使用
和

另外，如果您希望在用户单击时进行重定向，则可以使用

希望这会对你有所帮助，如果你有任何疑问，我会很乐意帮助你：-）
我对你的HTML做了一些修改，使其更具语义，对于下拉文本，你可以尝试纯javascript。我希望这将对您有所帮助。

对于旧值，您可以将您的值存储在某个地方，如本地存储中

例如，我正在本地存储中保存旧的选定值

const months = document.getElementsByClassName("dropdown-content");
if(localStorage.getItem("oldval")){
 document.getElementById("dropdownMenuLink").innerHTML = 
 localStorage.getItem("oldval"); 
}
Array.from(months).map(month=>{
 month.addEventListener("click",(e)=>{
 let selectedValue = e.target.textContent;
 document.getElementById("dropdownMenuLink").innerHTML = 
 selectedValue;
 localStorage.setItem("oldval",selectedValue);
});
});


const months=document.getElementsByClassName（“下拉内容”）；
Array.from（month）.map（month=>{
月。添加的事件列表（“单击”，（e）=>{
e、 预防默认值（）；
让selectedValue=e.target.textContent；
document.getElementById（“dropdownMenuLink”）.innerHTML=selectedValue；
});
});
/*下拉按钮*/
.btn{
背景色：#D6182D；
颜色：白色；
填充：8px；
字体大小：16px；
边界：无；
最小宽度：200px；
显示：内联块；
文字装饰：无；
}
/*容器-需要定位下拉内容*/
.下拉列表{
位置：相对位置；
显示：内联块；
边界：10px；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：200px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
列表样式：无；
填充：0；
保证金：0；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时下拉链接的颜色*/
.下拉列表内容a：悬停{
背景色：#ddd；
}
/*悬停时显示下拉菜单*/
.下拉：悬停.下拉内容{
显示：块；
}
/*显示下拉内容时，更改下拉按钮的背景色*/
.下拉列表：hover.btn{
背景色：rgb（134,30,42）；
}

文件






我对HTML做了一些更改，使其更具语义，对于下拉文本，您可以尝试纯javascript。我希望这将对您有所帮助。

对于旧值，您可以将您的值存储在某个地方，如本地存储中

例如，我正在本地存储中保存旧的选定值

const months = document.getElementsByClassName("dropdown-content");
if(localStorage.getItem("oldval")){
 document.getElementById("dropdownMenuLink").innerHTML = 
 localStorage.getItem("oldval"); 
}
Array.from(months).map(month=>{
 month.addEventListener("click",(e)=>{
 let selectedValue = e.target.textContent;
 document.getElementById("dropdownMenuLink").innerHTML = 
 selectedValue;
 localStorage.setItem("oldval",selectedValue);
});
});


const months=document.getElementsByClassName（“下拉内容”）；
Array.from（month）.map（month=>{
月。添加的事件列表（“单击”，（e）=>{
e、 预防默认值（）；
让selectedValue=e.target.textContent；
document.getElementById（“dropdownMenuLink”）.innerHTML=selectedValue；
});
});
/*下拉按钮*/
.btn{
背景色：#D6182D；
颜色：白色；
填充：8px；
字体大小：16px；
边界：无；
最小宽度：200px；
显示：内联块；
文字装饰：无；
}
/*容器-需要定位下拉内容*/
.下拉列表{
位置：相对位置；
显示：内联块；
边界：10px；
}
/*下拉内容（默认情况下隐藏）*/
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#f1f1；
最小宽度：200px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
列表样式：无；
填充：0；
保证金：0；
}
/*下拉列表中的链接*/
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
/*更改悬停时下拉链接的颜色*/
.下拉列表内容a：悬停{
背景色：#ddd；
}
/*悬停时显示下拉菜单*/
.下拉：悬停.下拉内容{
显示：块；
}
/*显示下拉内容时，更改下拉按钮的背景色*/
.下拉列表：hover.btn{
背景色：rgb（134,30,42）；
}

文件






非常感谢！：）正是我需要的！这段代码在这里运行得非常好，但不幸的是，当我在本地运行整个程序时，就不是这样了。知道为什么会这样吗？可能是引导有问题？你建议我把零件插入哪里？在标题内？@retost加载DOM后，我的意思是在正文末尾，您可以插入脚本。谢谢您的帮助！它现在可以工作了，但它停止了对我的重定向：-（试图找出它的来源from@Riposte您可以删除e.u