Question

大多数情况下，我正在进行后端编程，前端对我来说有点棘手，哈哈。试图在谷歌自己研究但没有结果，所以我决定在这里问。所以我创建了两个<ul><li></li></ul>，但每当我点击其中一个时，它们都会展开。也许我错过了一些东西，却找不到它。我添加下面的代码：

    <div class="sidebar-nav">

        <li><a href="#" data-target="#legal-menu-1" class="nav-header collapsed" data-toggle="collapse"><i class="fa fa-fw fa-legal"></i> First menu<i class="fa fa-collapse"></i></a></li>
        <li><ul id="legal-menu-1" class="legal-menu nav nav-list collapse">
            <li ><a href="link"><span class="fa fa-caret-right"></span>First menu 1</a></li>
            <li ><a href="link1"><span class="fa fa-caret-right"></span> First menu 2</a></li>
        <li ><a href="link2"><span class="fa fa-caret-right"></span> First menu 3</a></li>
    </ul></li>

        <li><a href="#" data-target="#legal-menu-2" class="nav-header collapsed" data-toggle="collapse"><i class="fa fa-fw fa-info"></i>Second maenu<i class="fa fa-collapse"></i></a></li>
        <li><ul id="legal-menu-2" class="legal-menu nav nav-list collapse">
            <li ><a href="link"><span class="fa fa-caret-right"></span> Second menu 1</a></li>
            <li ><a href="link1"><span class="fa fa-caret-right"></span> Second menu 2</a></li>
        </ul></li>
</div>

所有链接都存在，只需在粘贴到stackoverflow后更改它。

CSS部分：

.sidebar-nav {
  width: 240px;
  position: absolute;
  float: left;
  border-top: none;
  border-left: none;
  margin: 0em;
}
.sidebar-nav ul {
  list-style: none;
  padding-left: 0px;
}
.sidebar-nav li a .fa-caret-right {
  color: #666;
  padding-right: .25em;
}
.sidebar-nav .nav-header {
  border-top: 1px solid #fcfcfc;
  border-bottom: 1px solid #c8c8cb;
  background: #efeff0;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #efeff0), color-stop(1, #fafafa));
  background: -ms-linear-gradient(bottom, #efeff0, #fafafa);
  background: -moz-linear-gradient(center bottom, #efeff0 0%, #fafafa 100%);
  background: -o-linear-gradient(bottom, #efeff0, #fafafa);
  filter: progid:dximagetransform.microsoft.gradient(startColorStr='#e3e3e3', EndColorStr='#ffffff');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fafafa',EndColorStr='#efeff0')";
  border-left: none;
  color: #444;
  display: block;
  font-weight: normal;
  font-size: 1em;
  line-height: 2.5em;
  padding: .25em .25em .25em 1em;
  margin-bottom: 0px;
  text-shadow: none;
  text-transform: none;
  /*Change the arrow direction if the item is collapsed*/

}
.sidebar-nav .nav-header .label {
  float: right;
  margin-top: .5em;
  margin-right: .25em;
  line-height: 1.5em;
}
.sidebar-nav .nav-header:hover {
  background: #efeff0;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #efeff0), color-stop(1, #ffffff));
  background: -ms-linear-gradient(bottom, #efeff0, #ffffff);
  background: -moz-linear-gradient(center bottom, #efeff0 0%, #ffffff 100%);
  background: -o-linear-gradient(bottom, #efeff0, #ffffff);
  filter: progid:dximagetransform.microsoft.gradient(startColorStr='#e3e3e3', EndColorStr='#ffffff');
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',EndColorStr='#efeff0')";
}
.sidebar-nav .nav-header.collapsed .fa-collapse::before {
  content: "\f078";
}
.sidebar-nav .nav-header .fa-collapse::before {
  content: "\f077";
}
.sidebar-nav .nav-header .fa-collapse,
.sidebar-nav .nav-header .fa-collapse {
  float: right;
}
.sidebar-nav .nav-header .label {
  float: right;
  margin-top: .7em;
  line-height: 1.5em;
}
.sidebar-nav .nav-header i[class*="fa-"] {
  line-height: 2.25em;
  padding-right: .75em;
}
.sidebar-nav .nav-list {
  margin: 0px;
  border: 0px;
  background: #fafafa;
}
.sidebar-nav .nav-list  > li > a:hover {
  background: #d2d2dd;
}
.sidebar-nav .nav-list  > .active > a,
.sidebar-nav .nav-list  > .active > a:hover {
  text-shadow: none;
  background: #e5e5ea;
  border-top: 1px solid #d0d0d6;
  border-bottom: 1px solid #d0d0d6;
}
.sidebar-nav .nav-list li:first-child.active a {
  border-top: 0px;
}
.sidebar-nav .nav-list li:last-child.active a {
  border-bottom: 0px;
}
.sidebar-nav .nav-list  > li:hover {
  border-left: 4px solid #8989a6;
  overflow: hidden;
}
.sidebar-nav .nav-list  > li:hover a {
  margin-left: -4px;
}
.sidebar-nav .nav-list  > .active {
  overflow: hidden;
  border-left: 4px solid #909096;
}
.sidebar-nav .nav-list  > .active a {
  margin-left: -4px;
}
.sidebar-nav .nav-list  > .active > a:hover {
  background: #c3c3d2;
}
.sidebar-nav .nav-list  > li > a {
  color: #222;
  padding: .5em 1em;
}
.sidebar-nav .nav-list.collapse.in {
  border-bottom: 1px solid #ccc;
}

Answer 1

这是因为你的＆lt; a＆gt;元素数据目标属性正在尝试使用legal-menu类切换所有内容。

尝试为每个菜单提供唯一的ID（例如legal-menu-1，legal-menu-2），并使用ID选择器将相关的切换按钮属性更改为相应的ID;

... data-target="#legal-menu-1" ... //your a element

<li><ul id="legal-menu-1" class="legal-menu nav nav-list collapse">

单击其中一个菜单后，两个菜单都会展开

1 个答案: