我有一個下拉型別串列，它將在特定設備寬度后隱藏，默認情況下下拉框將可見，因此用戶無法折疊它。
輸入的默認狀態也是隱藏的。
假設設備寬度為 804px，下拉選單被隱藏，輸入可見。通過單擊輸入，用戶可以看到下拉串列的內容。
但由于某種原因，我無法使用輸入欄位定位下拉框。
input[type="checkbox"]:checked~.team-lists {
display: flex;
height: 430px;
}<div class="hireDevs">
<div class="headers">
<h2>Hire Developer Team</h2>
<label for="team-lists">
<input type="checkbox" class="add-lists" id="team-lists" hidden>
<i class="ri-add-fill"></i>
</label>
</div>
<div class="team-lists">
<a href="#">Android App Developers</a>
<a href="#">iOS App Developers</a>
<a href="#">Flutter App Developers</a>
</div>
</div>uj5u.com熱心網友回復：
您的選擇器input[type="checkbox"]:checked~.team-lists以任何具有 CSS 類的元素為目標，這些元素是處于選中狀態的復選框型別的輸入team-lists的兄弟( )。~這與您的 HTML 結構不匹配；為此，復選框和目標 div 必須具有完全相同的父元素，并且 div 位于復選框之后。鑒于您當前的方法，這意味著您必須將 div 放在標簽內（這將是一種非常糟糕的方法）。
直到最近，您只能在 CSS 中選擇向前（后續兄弟）/向下（后代），這意味著一旦您的選擇器到達您的復選框，就無法繼續您的選擇器，因此您可以到達您的div.team-lists.
為了解決這個古老的開發者問題，CSS 引入了非常新的:has()偽類，目前僅支持 Safari 和 Chrome（從 v 101 開始）在實驗特性標志后面。
請注意，為簡單起見，我洗掉了您的圖示（在您的代碼段中也不起作用），并將其替換為字母CB。
.hireDevs:has(input[type="checkbox"]:checked) .team-lists {
display: flex;
height: 430px;
}<div class="hireDevs">
<div class="headers">
<h2>Hire Developer Team</h2>
<label for="team-lists">
<input type="checkbox" class="add-lists" id="team-lists" hidden>
CB
</label>
</div>
<div class="team-lists" hidden>
<a href="#">Android App Developers</a>
<a href="#">iOS App Developers</a>
<a href="#">Flutter App Developers</a>
</div>
</div>因此，對于您的特定用例，如果:has()還不是一個選項，您將不得不求助于 JavaScript：
document
.getElementById('team-lists')
.addEventListener('change', function(event) {
document.querySelector('.team-lists').hidden = !this.checked;
});.team-lists:not([hidden]) {
display: flex;
height: 430px;
}<div class="hireDevs">
<div class="headers">
<h2>Hire Developer Team</h2>
<label for="team-lists">
<input type="checkbox" class="add-lists" id="team-lists" hidden>
CB
</label>
</div>
<div class="team-lists" hidden>
<a href="#">Android App Developers</a>
<a href="#">iOS App Developers</a>
<a href="#">Flutter App Developers</a>
</div>
</div>uj5u.com熱心網友回復：
您可以像這樣定位輸入標簽：
const input = document.querySelector (" input[type=checkbox] ");
const input = document.querySelector("input[type=checkbox]");
console.log(input);input[type="checkbox"]:checked .team-lists {
display: flex;
height: 430px;
}<div class="hireDevs">
<div class="headers">
<h2>Hire Developer Team</h2>
<label for="team-lists">
<input type="checkbox" class="add-lists" id="team-lists" hidden>
<i class="ri-add-fill"></i>
</label>
</div>
<div class="team-lists">
<a href="#">Android App Developers</a>
<a href="#">iOS App Developers</a>
<a href="#">Flutter App Developers</a>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/454938.html
標籤：javascript html css