尝试实现显示/隐藏描述框。
如果用户点击第一个showDesc链接,它会打开它的描述框。然后如果用户点击第二个showDesc链接,它会打开它的描述框,并且应该关闭所有其他打开的描述框。
它在下面:
下面是我的代码:
$(".showDesc").click(function () {
$(".descContainer").toggleClass("show");
});
.descContainer {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0,0,0,.08);
display: none;
line-height: 24px;
background-color: #fdfdfd;
}
.descContainer.show {
position: relative;
padding: 24px 40px 24px 24px;
border-top: 1px solid rgba(0,0,0,.08);
display: block;
line-height: 24px;
background-color: #fdfdfd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<section>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
<article class="feedBox mainSmooth" style="display: block;">
<div class="feedContainer">
<div class="feedContent">
<h3>Title</h3>
<div class="feedButtonContainer">
</div>
<ul class="list-inline feedExtras">
<li class="">
<a class="mainSmooth showDesc">show description</a>
</li>
</ul>
</div>
</div>
<div class="descContainer">
<div>Description Text</div>
</div>
</article>
</section>
</main>
2条答案
按热度按时间e3bfsja21#
您的问题是因为您一次更改了所有
.descContainer
元素上的类,而不仅仅是与单击的.showDesc
相关的类。为了解决这个问题,你需要使用DOM遍历来获取
closest('.feedContainer)
,然后next()
来获取你想要切换的元素,就像这样:ecbunoof2#
你不需要jQuery,甚至不需要javascript,使用:target CSS伪类在HTML +上设置id和内部链接就可以了。