：选中不工作时，输入标签是标签标签内的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