更改上选中的不共享父级的元素

Question

当选中input复选框时，我正试图使h1中的一些文本在屏幕上向下移动20像素。我知道+和~运算符，但它们都需要input和h1来共享父级，而我的DOM:则不是这样

.title {
  transition: all 1s ease;
}
.box:checked ~ .title {
  transform: translateY(20px);
}

<div class="some-element">
  <input type="checkbox" class="box"/>
</div>
<div class="some-other-element">
  <h1 class="title">Lorem ipsum</h1>
</div>

如果我将input移动到div.some-other-element内部，则转换工作正常，但由于我需要input位于div.some-element内部，所以我无法做到这一点。

当使用纯CSS检查input时，我可以触发div.some-other-element上的转换吗？如果没有，有没有一种方法可以用jQuery轻松地做到这一点？

Answer 1

没有纯粹的css解决方案，因为没有parent css选择器。您可以使用jQuery来完成它，只需toggling转换类：

jQuery

$('.box').on('change', function() {
  $(this).closest('.some-element').next('.some-other-element').find('.title').toggleClass('someclass');
});

CSS

.someclass{
  transform: translateY(20px);
}
.title {
  transition: all 1s ease;
}

检查下面的代码段

$('.box').on('change', function() {
  $(this).closest('.some-element').next('.some-other-element').find('.title').toggleClass('someclass');
});

.someclass {
  transform: translateY(20px);
}
.title {
  transition: all 1s ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="some-element">
  <input type="checkbox" class="box" />
</div>
<div class="some-other-element">
  <h1 class="title">Lorem ipsum</h1>
</div>
<div class="some-element">
  <input type="checkbox" class="box" />
</div>
<div class="some-other-element">
  <h1 class="title">Lorem ipsum</h1>
</div>

Answer 2

您可以使用is查看input是否为:checked，然后对margin-top 进行动画处理

$('input.box').click(function() {
  if ($(this).is(':checked')) {
    $('.title').animate({
      'margin-top': '100px'
    });
  } else {
    $('.title').animate({
      'margin-top': '20px'
    });
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="some-element">
  <input type="checkbox" class="box" />
</div>
<div class="some-other-element">
  <h1 class="title">Lorem ipsum</h1>
</div>

Answer 3

这个解决方案目前还没有实际运行，但将来可能会非常有趣，因为它是一个仅支持CSS的解决方案。无论如何，如果他们改变规格，这可能会变得不可能

CSS Level 4选择器指定关系型:has()选择器，它实际上是父选择器的替代品，因为您可以在DOM中不降序地选择子选择器。根据目前的规则，这可能是解决方案：

.title {
  transition: all 1s ease;
}
.some-element:has(.box:checked) ~ .some-other-element .title {
  transform: translateY(20px);
}

<div class="some-element">
  <input type="checkbox" class="box"/>
</div>
<div class="some-other-element">
  <h1 class="title">Lorem ipsum</h1>
</div>