Javascript HTML制作菜单展开/折叠

当我点击“项目”按钮时，我试图使“javascript项目”和“CGI项目”滑动切换。然而，我不太明白为什么当我点击时只有CGI项目按钮切换，而javascript项目按钮保持不变

我试图使用Jquery来实现幻灯片切换效果，但似乎只有CGI项目会做出反应，但两个按钮都有相同的HTML代码和css。有什么不同

*{框大小：边框框}
正文{字体系列：“Lato”，无衬线；}
/*设置选项卡的样式*/
分区选项卡{
浮动：左；
边框：1px实心#ccc；
背景色：#f1f1；
宽度：250px；
高度：500px；
}
/*设置选项卡内按钮的样式*/
div.tab按钮{
字号：18px；
显示：块；
背景色：继承；
颜色：黑色；
填充：22px 16px；
宽度：100%；
边界：无；
大纲：无；
文本对齐：左对齐；
光标：指针；
过渡：0.3s；
}
/*更改悬停按钮的背景色*/
div.tab按钮：悬停{
背景色：#ddd；
}
/*创建一个活动/当前的“tab button”类*/
div.tab按钮.active{
背景色：#ccc；
}
.项目列表{
显示：无；
}
/*设置选项卡内容的样式*/
.tabContent{
浮动：左；
填充：0px 12px；
宽度：70%；
高度：500px；
}
李{
列表样式类型：无；
}
关于我自己
项目
Javascript项目
cgi项目
接触
关于我自己
这是我的信息区

接触
这是it联系部门

Javascript项目
这是javascript项目部分

CGI项目
这是CGI项目部分

函数openInfo（evt、diplayInfo）{
var i，tabcontent，tablinks；
//使用class=“tabContent”获取所有元素并隐藏它们
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i对于（i=0；i如果只查找代码的修复程序，则可以使用以下标记替换project按钮：

<button class="tabLinks" id="projects">Projects</button>
<div id="projects-list">
    <button class="tabLinks" onclick="openInfo(event, 'javascript project')">Javascript project</button>
    <button class="tabLinks" onclick="openInfo(event, 'cgi project')">CGI project</button>
</div>


但我真的建议大家看看下面的解决方案，这可能对你也有帮助

据我所知，现在这些菜单将由HTML列表元素生成，对于您的情况，可以是这样的：

<nav  class="side-menu">
  <ul>
    <li><a href="#about-me">About me</a></li>
    <li><a href="#projects">Projects</a>
      <ul class="projects-list">
        <li><a href="#javascript-projects">Javascript</a></li>
        <li><a href="#cgi-projects">CGI</a></li>
      </ul>
    </li>
    <li><a href="#contact-me">Contact me</a></li> 
  </ul>
</nav>

$(document).ready(function(){ 
    var projectsList = $('ul.projects-list');
    $('nav').on('click','a',function(){         // binds event on each link in nav container (uses event delegate)
       var contentId = $(this).attr('href');    // gets content id based on link href attribute
       if(contentId==='#projects'){             // if clicked item is projects  
          projectsList.slideToggle(300);        // then toggle projects list
       } else {                                 // else  
          $('.tabContent').fadeOut(0);          // fadeout all contents
          $(contentId).fadeIn(300);             // and fade in content of clicked link
       }
   });
});

对于CSS和查看它的实际操作，我建议您在此处进行检查，请：

希望对您有所帮助。
项目
<button class="tabLinks" id="projects">Projects</button>
    <ul>
        <li id="java">
            <button class="tabLinks" onclick="openInfo(event, 'javascript project')">Javascript project</button>
        </li>
        <li id="cgi">
            <button class="tabLinks" onclick="openInfo(event, 'cgi project')">CGI project</button>
        </li>
    <ul>



Javascript项目


CGI项目


<代码> <代码> <代码> IDS中有空格，这是无效标记。您的jQuery可能会因此混淆。请考虑双桶IDS的连字符或下划线，并将项目> <代码>转换为类<代码> Projt：我真的建议您首先重写项目按钮的HTML标记，您使用的是没有任何
的
，并且将按钮放在另一个按钮中，如果没有错误，这不是很好的标记实践方式。我建议的另一件事是继续使用jQuery，如果您将它添加到脚本中，它有助于理解和阅读代码，而不是随意使用本机JavaScript和jQuery非常感谢您的帮助，您的答案非常好。我仍然有点困惑，为什么您使用“a”而不是“button”？另一个问题是，当您编写ul.projects-list时，“projects list”是否必须在标记
内，如果它在oth内，它将不起作用er标签，比如
？很高兴听到这一点，对于“a”而不是按钮部分，我认为这更有意义，因为它们仍然是一个链接而不是一个按钮，而且它们使用hashtag更改URL，这也让用户在使用此应用程序时更有意义，另一个原因应该是，无论谁看到你的代码，他或她都希望这些元素是链接否t按钮。对于“项目列表”，实际上任何像div或p或….这样的容器块都可以代替“ul”，只要它有类，但正如我在回答中所说的，将nav项包装为列表元素更有意义，因此我建议使用“ul”作为容器。
<button class="tabLinks" id="projects">Projects</button>
    <ul>
        <li id="java">
            <button class="tabLinks" onclick="openInfo(event, 'javascript project')">Javascript project</button>
        </li>
        <li id="cgi">
            <button class="tabLinks" onclick="openInfo(event, 'cgi project')">CGI project</button>
        </li>
    <ul>