Javascript 动态更改子菜单的标题

我想创建一个类别下拉菜单。当页面第一次加载时，我希望下拉列表显示“类别”。我想能够点击一个类别，如“Tops”。然后下拉列表的标题变为“顶部”，而不是类别。我不知道该怎么开始，我对编码很陌生。在W3上找到一些代码用作我的基线

  <button onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

下拉列表

Javascript

toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

在隐藏和显示下拉内容之间切换*/
函数myFunction（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
//如果用户在下拉菜单外单击，请关闭下拉菜单
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

这是一种不必使用JavaScript的方法，只需使用html和CSS创建下拉列表，并使用JavaScript处理名称更改事件

需要注意的一点是，在使用

title.innerHTML = name ;

它会破坏原始列表并覆盖它，因此在该语句之后，我们必须使用

title.appendChild(list)

这是工作代码

var title=document.getElementById（'title'）；
var list=document.getElementById（'list'）；
设c1=document.getElementById（'c1'）；
设c2=document.getElementById（'c2'）；
设c3=document.getElementById（'c3'）；
var namec1=c1.innerHTML；
var namec2=c2.innerHTML；
var namec3=c3.innerHTML；
//console.log（名称）
c1.添加事件列表器（“单击”，函数（e）{
重命名（名称C1）
//在这里添加更多事件内容
});
c2.添加事件列表器（“单击”，功能（e）{
重命名（名称C2）
//在这里添加更多事件内容
});
c3.addEventListener（“单击”，函数（e）{
重命名（名称C3）
//在这里添加更多事件内容
});
函数重命名（名称）
{
var title=document.getElementById（'title'）；
title.innerHTML=名称；
标题.附加子项（列表）
}

a{
文字装饰：无；
}
导航{
字体系列：monospace；
}
保险商实验室{
背景：darkorange；
列表样式：无；
保证金：0；
左侧填充：0；
}
李{
颜色：#fff；
背景：darkorange；
显示：块；
浮动：左；
填充：1rem；
位置：相对位置；
文字装饰：无；
过渡时间：0.5s；
}
李阿{
颜色：#fff；
}
李:悬停,，
李：关注内部{
背景：红色；
光标：指针；
}
李：集中注意力{
大纲：无；
}
ul li ul{
背景：橙色；
可见性：隐藏；
不透明度：0；
最小宽度：5雷姆；
位置：绝对位置；
过渡：所有0.5s缓解；
页边顶部：1rem；
左：0；
显示：无；
}
ul li：悬停>ul，
ul li：专注于>ul，
悬停，
聚焦{
能见度：可见；
不透明度：1；
显示：块
}
ulli ulli{
明确：两者皆有；
宽度：100%；
}

类别

Sub-1
Sub-2
Sub-3

这是一种不必使用JavaScript的方法，只需使用html和CSS创建下拉列表，并使用JavaScript处理名称更改事件

需要注意的一点是，在使用

title.innerHTML = name ;

它会破坏原始列表并覆盖它，因此在该语句之后，我们必须使用

title.appendChild(list)

这是工作代码

var title=document.getElementById（'title'）；
var list=document.getElementById（'list'）；
设c1=document.getElementById（'c1'）；
设c2=document.getElementById（'c2'）；
设c3=document.getElementById（'c3'）；
var namec1=c1.innerHTML；
var namec2=c2.innerHTML；
var namec3=c3.innerHTML；
//console.log（名称）
c1.添加事件列表器（“单击”，函数（e）{
重命名（名称C1）
//在这里添加更多事件内容
});
c2.添加事件列表器（“单击”，功能（e）{
重命名（名称C2）
//在这里添加更多事件内容
});
c3.addEventListener（“单击”，函数（e）{
重命名（名称C3）
//在这里添加更多事件内容
});
函数重命名（名称）
{
var title=document.getElementById（'title'）；
title.innerHTML=名称；
标题.附加子项（列表）
}

a{
文字装饰：无；
}
导航{
字体系列：monospace；
}
保险商实验室{
背景：darkorange；
列表样式：无；
保证金：0；
左侧填充：0；
}
李{
颜色：#fff；
背景：darkorange；
显示：块；
浮动：左；
填充：1rem；
位置：相对位置；
文字装饰：无；
过渡时间：0.5s；
}
李阿{
颜色：#fff；
}
李:悬停,，
李：关注内部{
背景：红色；
光标：指针；
}
李：集中注意力{
大纲：无；
}
ul li ul{
背景：橙色；
可见性：隐藏；
不透明度：0；
最小宽度：5雷姆；
位置：绝对位置；
过渡：所有0.5s缓解；
页边顶部：1rem；
左：0；
显示：无；
}
ul li：悬停>ul，
ul li：专注于>ul，
悬停，
聚焦{
能见度：可见；
不透明度：1；
显示：块
}
ulli ulli{
明确：两者皆有；
宽度：100%；
}

类别

Sub-1
Sub-2
Sub-3

非常感谢！这很有帮助。有没有办法在下拉菜单中保留类别标题？例如，您单击了“sub-3”，标题现在是“sub-3”，但当您再次单击下拉列表时，它将在列表顶部显示标题类别？是的，您可以在我原始答案的末尾添加一个片段，向您展示如何只需将逻辑添加到原始函数中。非常感谢！这很有帮助。有没有办法在下拉菜单中保留类别标题？对于