:选中不工作时,输入标签是标签标签内的CSS
问题描述:
我能够得到这个代码工作::选中不工作时,输入标签是标签标签内的CSS
[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的解决方案。
谢谢
答
工作了使用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>
答
的问题是~
选择。请参阅W3C
~
选择紧跟在前一个参数之后的元素。所以,当你在第一个例子中的HTML它的作品,因为它会在一个元素数据-name属性的#UniqueCheckbox
后立即与您的代码玩弄了一会儿后,有没有简单的方法使用纯CSS(我可以看到)来做到这一点,即使是过渡。 HTML嵌套的方式太奇怪了,不能用CSS来定位......实际上,定位并不难 - 但是使用:checked伪类作为触发事件来更改其他div,在这种情况下,非常奇怪的事情。在其他例子(比如下拉菜单),使用psuedoclass作为触发时,你会看到触发因素通常内它调用的伪类元素..
Look at this dropdown menu example是,注意如何nav li:hover ul
随着HTML是如何以结构化的工作
工作我会使用jQuery ALA推荐一个简单的单击处理this
那么它是不是一个兄弟 – epascarello
http://*.com/questions/1014861/is-there-a-css-parent-selector – epascarello
嗨,你能解释一下吗? – SSS