我有一个父View模型:
var monthVM = function (mData) {
this.Id = mData.Id;
this.Name = mData.Name;
if (mData.Days != null) {
$.each(mData.Days, function (index, item) {
var newDay = new dayVM(item, index);
this.Days.push(newDay );
});
}
}
和dayVM
:
var dayVM= function (dData, index) {
this.Id=dData.Id;
this.Mon = ko.observable(dData.Mon);
this.Tue = ko.observable(dData.Tue);
this.Wed = ko.observable(dData.Wed);
this.Thu = ko.observable(dData.Thu);
this.Fri = ko.observable(dData.Fri);
this.Sat = ko.observable(dData.Sat);
this.Sun = ko.observable(dData.Sun);
this.didOnMon = function (item) {
if (item.Mon() == false) item.Mon(true);
else item.Mon(false);
//other stuff
}
this.didOnTue = function (item) {
if (item.Tue() == false) item.Tue(true);
else item.Tue(false);
//other stuff
}
}
HTML绑定
<div class="row">
<div class="col-9 btn-group">
<button data-bind="css: Mon() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeMon">Mon</button>
<button data-bind="css: Tue() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeTue">Tue</button>
<button data-bind="css: Wed() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeWed">Wed</button>
<button data-bind="css: Thu() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeThu">Thu</button>
<button data-bind="css: Fri() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeFri">Fri</button> div
<button data-bind="css: Sat() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeSat">Sat</button>
<button data-bind="css: Sun() == false ? 'btn btn-white btn-xs mt-1' : 'btn btn-dark btn-xs mt-1', click:changeSun">Sun</button>
</div>
</div>
我需要添加一个边框,如将深色按钮分组,一个挨着一个,但仍保持设计:按钮填充col-9 div
,如
每次其中一个按钮变白色时,它都应该为其他深色的按钮调整轮廓。
我试过用
.btn-dark-custom {
outline: 1px solid black;
outline-offset: 2px;
}
<button class="btn btn-dark btn-dark-custom" onclick="changeWed()">Wed</button>
但它为每个深色按钮绘制边框,而不是作为一个组。我也尝试过在JS中添加border
行,但我无法添加偏移量。
3条答案
按热度按时间jdzmm42g1#
在纯css中,这有点复杂,但这里有一种可能性(Jquery仅用于click类切换):
第一个
vxqlmq5t2#
outline
应用于整个元素,因此它将绘制在每个元素上。它绘制在元素的顶部,因此您无法隐藏它。使用outline属性创建的轮廓绘制在框的“上方”,即,轮廓始终在顶部,并且不影响框或任何其他框的位置或大小。ref纯CSS解决方案您可以使用
::before
伪元素创建类似轮廓的效果:第一个
可能的JavaScript解决方案您可以在CSS中将outline设置为
.btn-group
。每次用户切换按钮时,将所有黑色按钮分组到它们自己的.btn-group
Package 器中。例如,如果用户取消选择星期四和星期五,则DOM如下所示:
第一个
你可以编写javascript,使其在用户每次选择/取消选择一个按钮时都具有如上所述的结构。
yruzcnhs3#
尝试使用伪元素,如::before、::after。下面是一个示例: