Javascript 编辑html+；css+；js用于下拉导航栏

我找到了下拉导航条的完美代码。但我一直在尝试根据我的需要编辑它。原始完整代码位于此处： 以及它的外观：

HTML:

<div id="topbar">
  <div id="logo">LOGO</div>
  <div id="sections_btn_holder">
    <button onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">&#9662;</span></button>
  </div>
  <div id="sections_panel">
    <div>
      Try adding things like more child div containers, links, buttons, menus, pictures, paragraphs, videos, etc...
    </div>
  </div>
</div>

body {
  margin: 0px;
  background: #999;
}

div#topbar {
  background: -webkit-linear-gradient(#666, #000);
  background: linear-gradient(#666, #000);
  height: 60px;
}

div#topbar > #logo {
  float: left;
  width: 140px;
  height: 35px;
  margin: 8px 0px 0px 30px;
  font-size: 36px;
  color: #999;
}

div#topbar > #sections_btn_holder {
  float: left;
  width: 144px;
  height: 46px;
  padding-top: 16px;
}

div#topbar > #sections_btn_holder > button {
  background: #F90;
}

div#topbar > #sections_panel {
  position: absolute;
  height: 0px;
  width: 550px;
  background: #000;
  top: 60px;
  left: 160px;
  border-radius: 0px 0px 8px 8px;
  overflow: hidden;
  z-index: 10000;
  transition: height 0.3s linear 0s;
}

div#topbar > #sections_panel > div {
  background: #333;
  padding: 20px;
  height: 238px;
  margin: 10px;
  color: #FC0;
}

function toggleNavPanel(x) {
  var panel = document.getElementById(x),
    navarrow = document.getElementById("navarrow"),
    maxH = "300px";
  if (panel.style.height == maxH) {
    panel.style.height = "0px";
    navarrow.innerHTML = "▾";
  } else {
    panel.style.height = maxH;
    navarrow.innerHTML = "▴";
  }
}

JS:

<div id="topbar">
  <div id="logo">LOGO</div>
  <div id="sections_btn_holder">
    <button onclick="toggleNavPanel('sections_panel')">Navigator <span id="navarrow">&#9662;</span></button>
  </div>
  <div id="sections_panel">
    <div>
      Try adding things like more child div containers, links, buttons, menus, pictures, paragraphs, videos, etc...
    </div>
  </div>
</div>

body {
  margin: 0px;
  background: #999;
}

div#topbar {
  background: -webkit-linear-gradient(#666, #000);
  background: linear-gradient(#666, #000);
  height: 60px;
}

div#topbar > #logo {
  float: left;
  width: 140px;
  height: 35px;
  margin: 8px 0px 0px 30px;
  font-size: 36px;
  color: #999;
}

div#topbar > #sections_btn_holder {
  float: left;
  width: 144px;
  height: 46px;
  padding-top: 16px;
}

div#topbar > #sections_btn_holder > button {
  background: #F90;
}

div#topbar > #sections_panel {
  position: absolute;
  height: 0px;
  width: 550px;
  background: #000;
  top: 60px;
  left: 160px;
  border-radius: 0px 0px 8px 8px;
  overflow: hidden;
  z-index: 10000;
  transition: height 0.3s linear 0s;
}

div#topbar > #sections_panel > div {
  background: #333;
  padding: 20px;
  height: 238px;
  margin: 10px;
  color: #FC0;
}

function toggleNavPanel(x) {
  var panel = document.getElementById(x),
    navarrow = document.getElementById("navarrow"),
    maxH = "300px";
  if (panel.style.height == maxH) {
    panel.style.height = "0px";
    navarrow.innerHTML = "▾";
  } else {
    panel.style.height = maxH;
    navarrow.innerHTML = "▴";
  }
}

我想得到的是：下拉导航栏，如示例中所示，但有三个按钮“历史”、“哲学”、“物理”。这三个部分中的每一部分都必须包含几本书的名称，例如：

历史：-

希罗多德的历史

提图斯·利维乌斯。罗马历史

伊万·克里皮亚克维奇。乌克兰的伟大历史

“哲学”：

柏拉图的著作

亚里士多德的尼科马伦理学

赫里霍里·斯科沃罗达的寓言和格言

“物理学”：

斯蒂芬·霍金。时间的简史

雅科夫·佩雷尔曼。娱乐物理学

---

如果有人能提供帮助，我将不胜感激。我是网络开发新手。

你在找类似的东西吗

jQuery（文档）.ready（函数（e）{
函数t（t）{
绑定（“点击”，函数（t）{
t、 预防默认值（）；
e（this.parent（）.fadeOut（））
})
}
e（“下拉切换”）。单击（函数（）{
var t=e（this）.parents（“.button dropdown”）.children（.dropdown menu”）.is（“：hidden”）；
e（“.button dropdown.dropdown menu”）.hide（）；
e（“.button dropdown.dropdown toggle”）.removeClass（“活动”）；
if（t）{
e（this）.parents（“.button dropdown”）.children（“.dropdown menu”）.toggle（）.parents（“.button dropdown”）.children（.dropdown toggle”）.addClass（“活动”）
}
});
e（文件）。绑定（“点击”，功能（t）{
var n=e（t.目标）；
如果（！n.parents（）.hasClass（“按钮下拉菜单”））e（“.button下拉菜单”）.hide（）；
});
e（文件）。绑定（“点击”，功能（t）{
var n=e（t.目标）；
如果（！n.parents（）.hasClass（“按钮下拉”））e（“.button dropdown.dropdown切换”）.removeClass（“活动”）；
})
});
正文{
背景色：#eee；
文本对齐：居中；
填充顶部：50px；
}
.导航{
显示：块；
字体：13px Helvetica，塔荷马，衬线；
文本转换：大写；
保证金：0；
填充：0；
}
李国荣先生{
显示：内联块；
列表样式：无；
}
.导航按钮下拉列表{
位置：相对位置；
}
李娜先生{
显示：块；
颜色：#333；
背景色：#fff；
填充：10px 20px；
文字装饰：无；
}
李海军{
显示：内联块；
左边距：5px；
字体大小：10px；
颜色：#999；
}
.nav li a:悬停，.nav li a.下拉切换.active{
背景色：#289dcc；
颜色：#fff；
}
.nav li a:悬停范围，.nav li a.下拉切换.活动范围{
颜色：#fff；
}
.nav li.下拉菜单{
显示：无；
位置：绝对位置；
左：0；
填充：0；
保证金：0；
利润上限：3倍；
文本对齐：左对齐；
}
.nav li.下拉菜单.激活{
显示：块；
}
.nav li.下拉菜单a{
宽度：150px；
}























也许这个工具栏适合您：
试试这个

Html

JS

功能面板（文本，x）{
var panel=document.getElementById（x），
navarrow=document.getElementById（“navarrow”），
maxH=“300px”；
var books=text.split（“，”）；
var html=''；
对于（var i=0；i类似的例子如何，这与您在HTML和CSS部分中提供的示例相同，在
div#sections_面板
中，我添加了3个div-您在问题中提到了3个部分-带有
子部分
类名


功能面板（x）{
var panel=document.getElementById（x），
navarrow=document.getElementById（“navarrow”），
maxH=“300px”；
如果（panel.style.height==maxH）{
panel.style.height=“0px”；
navarrow.innerHTML=“▾；”；
}否则{
panel.style.height=最大值；
navarrow.innerHTML=“▴；”；
}
}
正文{
边际：0px；
背景：#999；
}
顶杆{
背景：-webkit线性梯度（#666，#000）；
背景：线性梯度（#666，#000）；
高度：60px；
}
div#topbar>#徽标{
浮动：左；
宽度：140px；
高度：35px；
保证金：8px 0px 0px 30px；
字体大小：36px；
颜色：#999；
}
div#topbar>#sections#btn#u支架{
浮动：左；
宽度：144px；
高度：46px；
填充顶部：16px；
}
div#topbar>#sections_btn_holder>按钮{
背景:#F90；
}
分区#顶栏>#分区#面板{
位置：绝对位置；
高度：0px；
宽度：550px；
背景：#000；
顶部：60px；
填充：0 10px；
左：160像素；
边界半径：0px 0px 8px 8px；
溢出：隐藏；
z指数：10000；
过渡：高度0.3s线性0s；
}
分区#顶栏>#分区(面板>)子分区{
背景：#333；
填充：10px；
高度：258px；
利润率：10px 2px 0；
颜色：#FC0；
宽度：计算（31%-10px）；
显示：内联块；
浮动：左；
}
#章节面板>子章节>a{
颜色：#EEE；
显示：块；
填充：10px 5px；
文字装饰：无；
边框底部：1个点#666；
}
#分区面板>.sub分区>a:悬停{
颜色：#333；
背景颜色：橙色；
}
#章节面板>子章节>h3{
颜色：橙色；
文本对齐：居中；
垫底：5px；
边框底部：1px#222实心；
}

标志
导航器▾；
搜索引擎
社交网络
视频网络
是，设计和目标（这是doi