javascript - HTML 对象不断增长并插入其他对象

Question

我怎样才能做到给定两个元素让我们说这些框:

如果我点击其中一个，它会变大，而另一个会缩小，反之亦然:

我该怎么做？

我见过这种用 CSS 完成的，使用焦点标签并调整宽度。但我有两个问题，第一，我如何影响其他元素，第二，据我所知，调整宽度只会正确拉伸(stretch)它们。我见过人们改变 float 元素的方式来处理这个问题，但我不想在页面上移动它们来做到这一点。

Answer 1

这里有 2 个示例没有 Javascript/jQuery:

纯CSS - 点击触发:(example)

使用 CSS 中的复选框 hack，当复选框为 :checked 时，您可以有效地切换元素的宽度。 CSS 的一部分如下所示:

input[type=checkbox]:checked ~ .red {
    width:70%;
}
input[type=checkbox]:checked ~ .green {
    width:20%;
}

转到example完整的 CSS。

HTML

<input type="checkbox" id="toggle" />
<div class="red">
    <label for="toggle"></label>
</div>
<div class="green">
    <label for="toggle"></label>
</div>

_{您可能还对原始 example 感兴趣我做了。它采用了不同的方法，尽管它并不完全有效。}

纯 CSS - 悬停时触发:(example)

不幸的是，相邻选择器和一般同级选择器都不能选择先前的元素，因此这使得这有点困难。为了在一定程度上解决这个问题，我在主要元素之前放置了 2 个常规元素。

.greenS:hover, .greenS:hover ~ .green,
.redS:hover, .redS:hover ~ .red {
    width:72%;
}
.greenS:hover ~ .redS, .greenS:hover ~ .red,
.redS:hover ~ .greenS, .redS:hover ~ .green {
    width:22%;
}

HTML

<div class="redS"></div><div class="greenS"></div>
<div class="red"></div>
<div class="green"></div>

---

由于它被标记为 JS/jQuery，因此这里有 2 个替代解决方案。

JS/jQuery - 点击触发:(example)

$('.red, .green').click(function(){
    $('.red').toggleClass('expanded')
    .next('.green').toggleClass('contracted');
});

JS/jQuery - 悬停时触发:(example)

$('.red').hover(function(){
    $(this).toggleClass('expanded')
    .next('.green').toggleClass('contracted');
});
$('.green').hover(function(){
    $(this).toggleClass('expanded')
    .prev('.red').toggleClass('contracted');
});