Question

基本上我有一个div，我试图找出如何根据所选的复选框增加宽度，并添加到该宽度，因为更多的选中。

示例HTML（抱歉，如果语法有点偏离，我在内存中写入）：

<div class="barDiv"></div>

<label for="cb50"><h2>Click me to add 50!</h2></label>
<input type="checkbox" id="cb50">

<label for="cb30"><h2>Click me to add 30!</h2></label>
<input type="checkbox" id="cb30">

示例SCSS：

$add: 0px;

.barDiv {
    width: $add;
    height: 10px;
    background-color: #444;
}

#cb50:checked {
    ~ .barDiv {
        width: $add + 50px;
    }
}

#cb30:checked {
    ~ .barDiv {
        width: $add + 30px;
    }
}

如果我写的是正确的，那么我的设置单独工作，但是我想要在检查两者时宽度为80px，而只是在两个宽度之间切换。我知道我已经看到这个用LESS做了，我希望它也适用于SCSS。谢谢你的帮助！

Answer 1

要实现此功能，您需要.barDiv显示在DOM中的两个复选框下（~选择器适用于下一个兄弟，而不是上一个。）
您还需要在选中两个复选框时创建规则。

这是纯css的一个例子（注意sass最终编译成css），我希望它是你正在寻找的：

.barDiv {
    width: 0;
    height: 10px;
    background-color: #444;
}
#cb50:checked  ~ .barDiv {
    width: 50px;
}
#cb30:checked  ~ .barDiv {
    width: 30px;
}
#cb50:checked ~ #cb30:checked ~ .barDiv {
    width: 80px;
}

<label for="cb50"><h2>Click me to add 50!</h2></label>
<input type="checkbox" id="cb50">

<label for="cb30"><h2>Click me to add 30!</h2></label>
<input type="checkbox" id="cb30">

<div class="barDiv"></div>

使用SCSS添加并保持div的宽度值？

1 个答案: