：選中不工作時，輸入標籤是標籤標籤內的CSS

Question

我能夠得到這個代碼工作：

[data-field-name="HideAndShow"] { 
 
    opacity: 0; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
} 
 

 
input[id="UniqueCheckbox"]:checked ~ [data-field-name="HideAndShow"] { 
 
    opacity: 1 !important; 
 
    max-height: 100px !important; 
 
    overflow: visible !important; 
 
    display: block !important; 
 
}

<input id="UniqueCheckbox" type="checkbox"> 
 
<label>Click to show</label> 
 
    
 
<div data-field-name="HideAndShow"> 
 
    Hide and Show This 
 
</div>

在我想要的風格它的應用程序具有輸入標籤內，我無法得到它的工作：

[data-field-name="HideAndShow"] { 
 
    opacity: 0; 
 
    max-height: 0; 
 
    overflow: hidden; 
 
} 
 

 
input[id="UniqueCheckbox"]:checked ~ [data-field-name="HideAndShow"] { 
 
    opacity: 1 !important; 
 
    max-height: 100px !important; 
 
    overflow: visible !important; 
 
    display: block !important; 
 
}

<label><input id="UniqueCheckbox" type="checkbox">Click to show</label> 
 
    
 
<div data-field-name="HideAndShow"> 
 
    Hide and Show This 
 
</div>

我正在設計的應用程序非常鎖定，我無法更改它。有沒有解決這個問題的HTML結構被鎖定的問題？理想情況下只使用CSS。

編輯

我很樂意考慮jQuery的解決方案。

謝謝

Answer 1

工作了使用jQuery如果有人有興趣：

 
$(document).ready(function(){ 
 
    $("#UniqueCheckbox").click(function(){ 
 
    if (typeof hidden === 'undefined' || hidden == true) { 
 
     $(document.querySelectorAll('[data-field-name="HideAndShow"]')).show(100); 
 
     hidden = false; 
 
    } 
 
else { 
 
     $(document.querySelectorAll('[data-field-name="HideAndShow"]')).hide(100); 
 
     hidden = true; 
 
    } 
 
     }); 
 
});

[data-field-name="HideAndShow"] { 
 
display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 

 

 
<label><input id="UniqueCheckbox" type="checkbox">Click to show</label> 
 
    
 
<div style="" data-field-name="HideAndShow"> 
 
    Show and Hide This 
 
</div>

Answer 2

的問題是~選擇。請參閱W3C

~選擇緊跟在前一個參數之後的元素。所以，當你在第一個例子中的HTML它的作品，因爲它會在一個元素數據-name屬性的#UniqueCheckbox

後立即與您的代碼玩弄了一會兒後，有沒有簡單的方法使用純CSS（我可以看到）來做到這一點，即使是過渡。 HTML嵌套的方式太奇怪了，不能用CSS來定位......實際上，定位並不難 - 但是使用：checked僞類作爲觸發事件來更改其他div，在這種情況下，非常奇怪的事情。在其他例子（比如下拉菜單），使用psuedoclass作爲觸發時，你會看到觸發因素通常內它調用的僞類元素..

Look at this dropdown menu example是，注意如何nav li:hover ul隨着HTML是如何以結構化的工作

工作我會使用jQuery ALA推薦一個簡單的單擊處理this