手风琴菜单，当我多次重新创建一个项目时，我更改了 ID，但该功能仍会打开所有项目答案

【问题标题】：Accordion menu, when i recreate an item several times, i change the id but the functionality still opens up all items手风琴菜单，当我多次重新创建一个项目时，我更改了 ID，但该功能仍会打开所有项目
【发布时间】：2014-08-17 17:21:21
【问题描述】：

我的页面左侧有一个简单的水平菜单。我正在尝试向菜单中添加更多项目；特别是具有子菜单的项目。原始菜单如下所示：

<nav class="mainMenu">
                    <ul id="menu-main-menu" class="menu"><li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-42"><a href="about/index.html"><i class="icon-menu-icon"></i><span class="text">About Us</span></a>
<ul class="sub-menu">
    <li id="menu-item-733" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-733"><a href="about/index.html"><i class="icon-menu-icon"></i><span class="text">About Us</span></a></li>
    <li id="menu-item-443" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-443"><a href="about/service/index.html"><i class="icon-menu-icon"></i><span class="text">Service</span></a></li>
    <li id="menu-item-444" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-444"><a href="about/the-team/index.html"><i class="icon-menu-icon"></i><span class="text">The Team</span></a></li>
    <li id="menu-item-441" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-441"><a href="about/careers/index.html"><i class="icon-menu-icon"></i><span class="text">Careers</span></a></li>
    <li id="menu-item-442" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-442"><a href="about/ethos/index.html"><i class="icon-menu-icon"></i><span class="text">Ethos</span></a></li>
</ul>
</li>
<li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-39"><a href="portfolio/index.html"><i class="icon-menu-icon"></i><span class="text">Portfolio</span></a>
<ul class="sub-menu">
    <li id="menu-item-56" class="menu-item menu-item-type-taxonomy menu-item-object-project-category menu-item-56"><a href="project-category/architecture/index.html"><i class="icon-menu-icon"></i><span class="text">Architecture</span></a></li>
    <li id="menu-item-57" class="menu-item menu-item-type-taxonomy menu-item-object-project-category menu-item-57"><a href="project-category/interiors/index.html"><i class="icon-menu-icon"></i><span class="text">Interiors</span></a></li>
    <li id="menu-item-58" class="menu-item menu-item-type-taxonomy menu-item-object-project-category menu-item-58"><a href="project-category/landscapes/index.html"><i class="icon-menu-icon"></i><span class="text">Landscapes</span></a></li>
</ul>
</li>
<li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-40"><a href="news/index.html"><i class="icon-menu-icon"></i><span class="text">News</span></a>
<ul class="sub-menu">
    <li id="menu-item-54" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-54"><a href="category/planning/index.html"><i class="icon-menu-icon"></i><span class="text">Planning</span></a></li>
    <li id="menu-item-53" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-53"><a href="category/on-site/index.html"><i class="icon-menu-icon"></i><span class="text">On-Site</span></a></li>
    <li id="menu-item-52" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-52"><a href="category/office/index.html"><i class="icon-menu-icon"></i><span class="text">Office</span></a></li>
    <li id="menu-item-51" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-51"><a href="category/in-design/index.html"><i class="icon-menu-icon"></i><span class="text">In Design</span></a></li>
    <li id="menu-item-55" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-55"><a href="category/publications/index.html"><i class="icon-menu-icon"></i><span class="text">Publications</span></a></li>
    <li id="menu-item-50" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-50"><a href="category/responsibility/index.html"><i class="icon-menu-icon"></i><span class="text">Corporate Responsibility</span></a></li>
</ul>
</li>
<li id="menu-item-41" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-41"><a href="contact/index.html"><i class="icon-menu-icon"></i><span class="text">Contact</span></a></li>
</ul></nav>

当我尝试使用子菜单/子菜单重新创建菜单项时，它看起来不错，但功能有点疯狂。假设我尝试复制“新闻”菜单项。我将在新闻下方重新创建它，并将重复的菜单项“新闻”上的 id 从 40 更改为 43。

问题是当我点击新项目时，原始和新项目的子菜单都会打开。

我认为这就像创建新 ID 一样简单，但我想我无法理解它是如何工作的。任何帮助将不胜感激。谢谢。

CSS：

/*****************************************/
/*               Sidebar                 */
/*****************************************/
.sidebar {
  position: fixed;
  left: -15.625em;
  top: 0;
  z-index: 100;
  width: 15.625em;
  padding-top: 2.5em;
  height: 100%;
  font-family: "freight-sans-pro", serif;
  background: #1c1f20;
  overflow-y: auto;
  /* Open State */
  /* Main Menu */
  /* Footer Details (at bottome) */
}
.pushed .sidebar {
  left: 0;
}
.sidebar .mainMenu {
  font-size: 1em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.sidebar .mainMenu > ul > li {
  padding: 1.125em 1em 0.875em;
  border-bottom: 1px solid #252829;
}
.sidebar .mainMenu > ul > li > a {
  display: block;
}
.sidebar .mainMenu > ul > li > a > i {
  position: relative;
  top: -2px;
  vertical-align: middle;
  margin-right: 0.5em;
  font-size: 1.9em;
  color: #a4a4a4;
}
.sidebar .mainMenu > ul > li > a:after {
  position: relative;
  top: -1px;
  display: inline-block;
  vertical-align: middle;
  font-size: 1.2em;
  color: #a4a4a4;
  font-family: 'iconsStudioIndigo';
  content: '\e624';
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.sidebar .mainMenu > ul > li > a:only-child:after {
  display: none;
}
.sidebar .mainMenu > ul > li > ul {
  margin-left: 3.3em;
  line-height: 1.2em;
  font-size: 0.85em;
  max-height: 0;
  overflow: hidden;
}
.sidebar .mainMenu > ul > li > ul > li {
  -webkit-transform: translateZ(0);
  margin: 0.35em 0;
  opacity: 0;
}
.sidebar .mainMenu > ul > li > ul > li > a {
  display: block;
  color: #a4a4a4;
}
.sidebar .mainMenu > ul > li > ul > li > a:focus, .sidebar .mainMenu > ul > li > ul > li > a:hover {
  color: white;
}
.sidebar .mainMenu > ul > li > ul > li > a i {
  opacity: 0;
  margin: 2px 7px 0 0;
}
.sidebar .mainMenu > ul > li > ul > li:nth-child(1) {
  -webkit-transition: opacity 0.4s ease 0.125s;
  transition: opacity 0.4s ease 0.125s;
}
.sidebar .mainMenu > ul > li > ul > li:nth-child(2) {
  -webkit-transition: opacity 0.4s ease 0.25s;
  transition: opacity 0.4s ease 0.25s;
}
.sidebar .mainMenu > ul > li > ul > li:nth-child(3) {
  -webkit-transition: opacity 0.4s ease 0.375s;
  transition: opacity 0.4s ease 0.375s;
}
.sidebar .mainMenu > ul > li > ul > li:nth-child(4) {
  -webkit-transition: opacity 0.4s ease 0.5s;
  transition: opacity 0.4s ease 0.5s;
}
.sidebar .mainMenu > ul > li > ul > li:nth-child(5) {
  -webkit-transition: opacity 0.4s ease 0.625s;
  transition: opacity 0.4s ease 0.625s;
}
.sidebar .mainMenu > ul > li > ul > li:nth-child(6) {
  -webkit-transition: opacity 0.4s ease 0.75s;
  transition: opacity 0.4s ease 0.75s;
}
.sidebar .mainMenu > ul > li > ul > li:nth-child(7) {
  -webkit-transition: opacity 0.4s ease 0.875s;
  transition: opacity 0.4s ease 0.875s;
}
.sidebar .mainMenu > ul > li > ul > li:nth-child(8) {
  -webkit-transition: opacity 0.4s ease 1s;
  transition: opacity 0.4s ease 1s;
}
.sidebar .mainMenu > ul > li > ul > li:nth-child(9) {
  -webkit-transition: opacity 0.4s ease 1.125s;
  transition: opacity 0.4s ease 1.125s;
}
.sidebar .mainMenu > ul > li > ul > li:nth-child(10) {
  -webkit-transition: opacity 0.4s ease 1.25s;
  transition: opacity 0.4s ease 1.25s;
}
.sidebar .mainMenu > ul > li > ul > li.current-menu-item a i {
  opacity: 1;
}
.sidebar .mainMenu > ul > li.current-menu-parent > a:after, .sidebar .mainMenu > ul > li.current-menu-item > a:after {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.sidebar .mainMenu > ul > li.current-menu-parent > ul, .sidebar .mainMenu > ul > li.current-menu-item > ul {
  max-height: 10.625em;
}
.sidebar .mainMenu > ul > li.current-menu-parent > ul > li, .sidebar .mainMenu > ul > li.current-menu-item > ul > li {
  opacity: 1;
}
.sidebar .mainMenu .menu-item i:before {
  content: '\e624';
}
.sidebar .mainMenu .menu-item-42 i:before {
  content: '\e623';
}
.sidebar .mainMenu .menu-item-39 i:before {
  content: '\e611';
}
.sidebar .mainMenu .menu-item-40 i:before {
  content: '\e61e';
}
.sidebar .mainMenu .menu-item-41 i:before {
  content: '\e620';
}
.sidebar .mainMenu .sub-menu .menu-item i:before {
  content: '\e607';
}
.sidebar .footerDetails {
  margin: 1.92308em 1.15385em;
  font-size: 0.8125em;
  color: #a4a4a4;
}
.sidebar .footerDetails li {
  margin-top: 15px;
  margin-top: 0.9375rem;
  text-transform: uppercase;
}
.sidebar .footerDetails li a {
  color: #a4a4a4;
}
.sidebar .footerDetails li a:focus, .sidebar .footerDetails li a:hover {
  color: white;
}
.sidebar .footerDetails .copyright li,
.sidebar .footerDetails .textPages li,
.sidebar .footerDetails .credit li {
  margin-top: 10px;
  margin-top: 0.625rem;
  text-transform: none;
}
.sidebar .footerDetails .textPages {
  margin-top: 1.53846em;
}
.sidebar .footerDetails .credit {
  margin-top: 1.15385em;
}
.sidebar .footerDetails .credit a {
  color: #737575;
}
.sidebar .footerDetails .credit a:hover {
  color: #76c044;
}
@media screen and (min-height: 45em) {
  .sidebar {
    padding-top: 6.25em;
  }
  .sidebar .footerDetails {
    position: absolute;
    left: 15px;
    left: 0.9375rem;
    bottom: 25px;
    bottom: 1.5625rem;
    margin: 0;
  }
  .sidebar .footerDetails .textPages {
    margin-top: 2.69231em;
  }
}
@media screen and (min-width: 1200px) {
  .sidebar {
    left: 0;
  }
}

【问题讨论】：

发布您的 CSS，以便我们为您提供帮助。
好的，是的.. 哎呀对不起。
更新了@Alek..感谢您的提醒..完全隔开。
只是一些友好的建议：为了提高您的问题的质量（以及快速回答问题的可能性），将您的 html 和 css 减少为仅与您的问题相关的代码。你让我们为你做了很多步法。干杯！
可以理解，注意！谢谢@philtune。

标签： html css menu

【解决方案1】：

我运行了您的代码，但它根本不能用作菜单。我假设您有一些 Javascript 来管理该功能。否则，当我单击一个菜单项时，它就像一个链接。

以下是一些可能有用的 CSS/Javascript 菜单基础知识：

HTML

假设你有以下无序列表：

<ul class="menu">
    <li>Home</li>
    <li class="dropdown"><span class="togglable">Products</span>
        <ul>
            <li>Oranges</li>
            <li>Apples</li>
            <li>Bananas</li>
        </ul>
    </li>
    <li class="dropdown"><span class="togglable">Blog</span>
        <ul>
            <li>My first post</li>
            <li>My last post</li>
        </ul>
    </li>
    <li>About</li>
</ul>

CSS 悬停菜单

首先你只想显示第一级菜单，所以：

.menu .dropdown>ul {
    position:absolute;
    left:-9999em;
}

然后你想在菜单项悬停时显示它：

.menu .dropdown:hover>ul {
    position:static;
    left:auto;
}

就是这样。你可以稍微改变一下你想如何隐藏/显示你的“子菜单”，比如display:none;到display:block;，或者opacity:0;到opacity:1;（这是我最喜欢的，因为你可以为不透明度设置动画），但这与选择器的想法基本相同。您可以随心所欲地复制菜单。

哎呀，您甚至不一定需要 .dropdown 类，因为您可以只针对具有 <ul> 后代的任何列表项：

ul.menu>li>ul { display:none; }
ul.menu>li:hover>ul { display:block; }

Javascript/CSS 混合（又名“Togglers”）

我喜欢使用最少的 Javascript，让 CSS 完成大部分的魔法。下面是一些 jQuery（如果有人可以使用 VanillaJS，请随意编辑）：

$('.menu .togglable')click(function(){
    $(this).toggleClass('toggled');
    return false; //just so the browser doesn't follow the link if it's an anchor
}

这将为我们的.togglable span 标签打开/关闭.toggled 类。现在是 CSS：

.togglable+ul {
    display:none;
}
.togglable.toggled+ul {
    display:block;
}
/* the '+' just selects the <ul> sibling right
   after the <span class="togglable"> */

就是这样。疯狂使用 CSS，但这些是 CSS 悬停/可切换菜单的基础。

【讨论】：

感谢@philtune 的回答我真的很想用我所拥有的东西工作，我只是想研究一下编辑 jquery。