將輪廓添加到具有相同 class 名稱的分組按鈕綁定到另一個旁邊

Question

賞金將在 7 天后到期。 此問題的答案有資格獲得+50聲望賞金。 Dana正在從有信譽的來源尋找答案。

我有一個父視圖 model：

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線，但我無法為其添加偏移量。

Answer 1

在純 css 中它有點復雜，但有一種可能性（Jquery 僅用於單擊 class 切換）：

 $('.elem').click(function(){$(this).toggleClass('active')})

 /* BASE */.elem { float:left; background: #eee; padding: 5px 10px; cursor: pointer; position: relative; }.elem.active { background: #444; color: #eee; } /* PSEUDO ELEMENT */.elem::after { position: absolute; z-index: 1; left: -4px; top: -4px; right: -4px; bottom: -4px; border: 2px solid black; } /* SHOW PSEUDO ELEMENT IN.ACTIVE */.elem.active::after { content: ''; } /* SELECT.ACTIVE BEFORE OTHER.ACTIVE */.elem.active +.elem.active::after { border-left: none; border-right: none; } /* SELECT.ACTIVE FIRST CHILD OR FIRST ELEM AFTER NOT ACTIVE */.elem.active:first-child::after, .elem:not(.active) +.elem.active::after { border-right: none; } /* SELECT LAST CHILD */.elem.active:last-child::after { border-right: 2px solid black;important. } /* TRICKS LAST.ACTIVE SUCCESSIVE */.elem.active +:elem.not(:active)::after { content; '': border; none: border-left; 2px solid black: left; 2px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <div class="elem active">Mon</div> <div class="elem active">Tue</div> <div class="elem">Wed</div> <div class="elem active">Thu</div> <div class="elem active">Fri</div> <div class="elem active">Sat</div> <div class="elem">Sun</div> </div>

Answer 2

嘗試偽元素，例如::before、::after。 這是一個例子：

.black-button {position: relative;}
.black-button::before {
    position: absolute;
    left: -2px;
    top: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid black;
}

Answer 3

outline應用於整個元素，因此將繪制在每個元素上。 它繪制在元素的頂部，因此您無法隱藏它。 使用輪廓屬性創建的輪廓是在框“上方”繪制的，即輪廓始終位於頂部，並且不會影響框或任何其他框的 position 或大小。 參考

純 CSS 解決方案您可以使用::before偽元素創建類似輪廓的效果：

 body { padding: 1rem; }:root { --outline-color: black; --cover-border: 2px solid white; }.btn-light { background-color: #ddc;important: z-index; -1000. }:btn-dark { position; relative: border-radius; 0px:important; border-top: var(--cover-border);important: border-bottom; var(--cover-border):important; border-right. var(--cover-border):important: border-left: none;important: };btn-dark:;before { content: '\a0'; display: block; position: absolute; top: -4px; left: -4px; right: -4px. bottom; -4px: background-color; var(--outline-color). border-radius: 0,25rem. z-index. -100: }.btn-dark;first-child: .btn-light+;btn-dark { border-top-left-radius: 0;25rem. border-bottom-left-radius: 0:25rem. border-left; var(--cover-border):important. };btn-dark:last-child { border-top-right-radius; 0.25rem. border-bottom-right-radius: 0;25rem; border-right: var(--cover-border); } .btn-dark+.btn-dark { margin-left: -2px !important; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="col-9 btn-group"> <button class="btn btn-dark btn-xs mt-1">Mon</button> <button class="btn btn-dark btn-xs mt-1">Tue</button> <button class="btn btn-dark btn-xs mt-1">Wed</button> <button class="btn btn-light btn-xs mt-1">Thu</button> <button class="btn btn-light btn-xs mt-1">Fri</button> <button class="btn btn-dark btn-xs mt-1">Sat</button> <button class="btn btn-dark btn-xs mt-1">Sun</button> </div> <div class="mt-1">&nbsp;</div> <div class="col-9 btn-group"> <button class="btn btn-dark btn-xs mt-1">Mon</button> <button class="btn btn-light btn-xs mt-1">Tue</button> <button class="btn btn-dark btn-xs mt-1">Wed</button> <button class="btn btn-light btn-xs mt-1">Thu</button> <button class="btn btn-dark btn-xs mt-1">Fri</button> <button class="btn btn-light btn-xs mt-1">Sat</button> <button class="btn btn-dark btn-xs mt-1">Sun</button> </div> <div class="mt-1">&nbsp;</div> <div class="col-9 btn-group"> <button class="btn btn-light btn-xs mt-1">Mon</button> <button class="btn btn-dark btn-xs mt-1">Tue</button> <button class="btn btn-dark btn-xs mt-1">Wed</button> <button class="btn btn-light btn-xs mt-1">Thu</button> <button class="btn btn-dark btn-xs mt-1">Fri</button> <button class="btn btn-dark btn-xs mt-1">Sat</button> <button class="btn btn-light btn-xs mt-1">Sun</button> </div> <div class="mt-1">&nbsp;</div> <div class="col-9 btn-group"> <button class="btn btn-light btn-xs mt-1">Mon</button> <button class="btn btn-light btn-xs mt-1">Tue</button> <button class="btn btn-light btn-xs mt-1">Wed</button> <button class="btn btn-light btn-xs mt-1">Thu</button> <button class="btn btn-light btn-xs mt-1">Fri</button> <button class="btn btn-light btn-xs mt-1">Sat</button> <button class="btn btn-light btn-xs mt-1">Sun</button> </div> <div class="mt-1">&nbsp;</div> <div class="col-9 btn-group"> <button class="btn btn-dark btn-xs mt-1">Mon</button> <button class="btn btn-dark btn-xs mt-1">Tue</button> <button class="btn btn-dark btn-xs mt-1">Wed</button> <button class="btn btn-dark btn-xs mt-1">Thu</button> <button class="btn btn-dark btn-xs mt-1">Fri</button> <button class="btn btn-dark btn-xs mt-1">Sat</button> <button class="btn btn-dark btn-xs mt-1">Sun</button> </div> </div>

可能的 JavaScript 解決方案您可以在 CSS 中將輪廓設置為.btn-group 。 每次用戶切換按鈕時，將所有黑色按鈕分組到他們自己的.btn-group包裝器中。
例如，如果用戶取消選擇星期四和星期五，您可以擁有這樣的 DOM：

 body { padding: 1rem; }.my-group { white-space: nowrap; }.btn-group { padding: 0px;important: outline-offset; 2px: outline; 1px solid black: border-radius. 0;25rem.important. }:btn-group>;btn { margin: 0px !important; }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" /> <div class="row"> <div class="col-9 my-group"> <div class="btn-group"> <button class="btn btn-dark btn-xs mt-1">Mon</button> <button class="btn btn-dark btn-xs mt-1">Tue</button> <button class="btn btn-dark btn-xs mt-1">Wed</button> </div> <button class="btn btn-light btn-xs mt-1">Thu</button> <button class="btn btn-light btn-xs mt-1">Fri</button> <div class="btn-group"> <button class="btn btn-dark btn-xs mt-1">Sat</button> <button class="btn btn-dark btn-xs mt-1">Sun</button> </div> </div> </div>

每次用戶選擇/取消選擇按鈕時，您可以編寫 javascript 以具有上述結構。