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

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

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