javascript - 当有多个时，如何将类添加到父元素

Question

如标题中所述，如果我有多个父元素，我想将一个类添加到一个元素的父元素。

为了更详细地解释我的意思，我将简要介绍一下初始情况。

标记:

<div class="box">
    <h3>Title</h3>
    <p>Some text</p>
    <span class="iconfont more"></span>
    <div class="slide">
        <p>some more text</p>
        <span class="iconfont close"></span>
    </div>
</div>

如您所见，我创建了一个包含一些内容、一个跨度的 div“框”以及另一个包含一些内容和一个跨度的 div“幻灯片”。

CSS:

.box {
    width: 300px;
    height: 500px;
    position: relative;
}

.slide {
    width: 300px;
    height: 500px;
    position: absolute;
    top: -500px;
    left: 0;
    transition: all 500 ease-in-out
}

让我们添加一些样式。 div 现在有一个宽度、高度和位置，加上滑动框已经收到一个过渡，使孔的东西变得平滑。您可能已经知道旅程的终点​​。

那么让我们通过培养新玩家来做到这一点:

.box.slided .slide {
    top: 0;
}

现在剩下的就是纯粹的例行公事了。通过单击范围添加/删除类 .slided 到 .box。它工作得很好，除了我之外每个人都很开心。因为如果我有更多这样的盒子怎么办？当然，使用 ID 而不是类来使它们独一无二也可以解决这个问题。但是如果我不知道我会有多少呢？这正是重点。

我如何添加或删除类 .slided 以准确显示包含我正在单击的跨度的此 div.box？

谢谢你的帮助

编辑:我试过的代码

$('div span').stop().click(function(event) {
    $('box').addClass('slided');
});

Answer 1

使用 $(this) 和 closest() 以相对方式遍历 DOM:

$('.more').click(function () {
    $(this).closest('.box').toggleClass('slid');
});

Demo

请注意，我已将负 z-index 添加到您的 slider div 以防止它覆盖“更多”链接，使其无法访问。这可能不是一个可行的生产解决方案。

这是一个 updated version过渡工作正常。