【发布时间】：2016-08-27 15:05:31
【问题描述】：
我在这里的 codepen 使用 'ul' 发现了这种高效实用的嵌套手风琴：https://codepen.io/brenden/pen/Kwbpyj
如下：
$('.toggle').click(function(e) {
e.preventDefault();
var $this = $(this);
if ($this.next().hasClass('show')) {
$this.next().removeClass('show');
$this.next().slideUp(350);
} else {
$this.parent().parent().find('li .inner').removeClass('show');
$this.parent().parent().find('li .inner').slideUp(350);
$this.next().toggleClass('show');
$this.next().slideToggle(350);
}
});url('http://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300,400,600');
* {
box-sizing: border-box;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
.active {
text-decoration: underline !important;
}
a {
text-decoration: none;
color: inherit;
}
p {
font-size: 1.1em;
margin: 1em 0;
}
.description {
margin: 1em auto 2.25em;
}
body {
width: 40%;
min-width: 300px;
max-width: 400px;
margin: 1.5em auto;
color: #333;
}
h1 {
font-family: 'Pacifico', cursive;
font-weight: 400;
font-size: 2.5em;
}
ul {
list-style: none;
padding: 0;
}
ul .inner {
padding-left: 1em;
overflow: hidden;
display: none;
}
ul .inner.show {
/*display: block;*/
}
ul li {
margin: .5em 0;
}
ul li a.toggle {
width: 100%;
display: block;
background: rgba(0, 0, 0, 0.78);
color: #fefefe;
padding: .75em;
border-radius: 0.15em;
transition: background .3s ease;
}
ul li a.toggle:hover {
background: rgba(0, 0, 0, 0.9);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<h1>A Cool Accordion</h1>
<p class="description">
You could simply toggle the .show class (if display: block is uncommented in the CSS) in JavaScript, but you'll lose the animation.
</p>
<ul class="accordion">
<li>
<a class="toggle" href="javascript:void(0);">Item 1</a>
<ul class="inner">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</li>
<li>
<a class="toggle" href="javascript:void(0);">Item 2</a>
<ul class="inner">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</li>
<li>
<a class="toggle" href="javascript:void(0);">Item 3</a>
<ul class="inner">
<li>
<a href="#" class="toggle">Open Inner</a>
<div class="inner">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus
blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis.
</p>
</div>
</li>
<li>
<a href="#" class="toggle">Open Inner #2</a>
<div class="inner">
<p>
Children will automatically close upon closing its parent.
</p>
</div>
</li>
<li>Option 3</li>
</ul>
</li>
<li>
<a class="toggle" href="javascript:void(0);">Item 4</a>
<ul class="inner">
<li>
<a href="#" class="toggle">Technically any number of nested elements</a>
<ul class="inner">
<li>
<a href="#" class="toggle">Another nested element</a>
<div class="inner">
<p>
As long as the inner element has inner as one of its classes then it will be toggled.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus
blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis.
</p>
</div>
</li>
</ul>
</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</li>
</ul>但它不支持通过为打开的标题添加例如“.active”类来支持活动状态。
还请看“第 3 项”。当您单击嵌套的“a”时，活动“li”父级中的“a”的“.active”类将被删除。这里的重点是如何在单击嵌套的“a”时保持它们处于活动状态？
那么你能帮我做吗？
【问题讨论】：
-
只需在
.click()方法中删除并添加.active类即可。 -
嗨，Morad Hamdy，你到底想对那个“.active”类做什么，因为它正在处理“.show”类，正如你将在代码中看到的那样，你会发现如果手风琴有 show类然后它是活动的
-
@Polyov 每个 'a' 都有类 '.toggle'。我想要为单击的“a”添加“.active”类，然后在单击另一个类似的“a”时将其删除
-
@HimeshAadeshara '.show' 被添加到下一个 'ul' 中，但我想在标题中添加 '.active' 类，即点击的 'a'
-
@MoradHamdy 我已经给出了答案，请检查下面的答案
标签： javascript jquery html accordion