我找到了一种使用 CSS 根据是否选中单选框来切换 span
或 input
元素可见性的方法(受此启发 question )。
但是,一旦应用 jQueryUI 微调器格式,我就失去了这种切换效果。
这jsFiddle展示了 CSS 如何适用于 span
元素,但不适用于 input
。事实上,只要我应用微调器,整个 input
就会消失。
有什么线索可以说明为什么会发生这种情况,以及如何使用 CSS 切换其可见性?
这是我在 fiddle 中使用的 CSS:
/* Control visibility of SPAN and INPUT (with jqueryui spinner class)
cf. https://stackoverflow.com/questions/21269376/radio-button-show-hide-content
*/
/*The span works fine*/
span#some-text {
display:none;
}
input#on-input:checked ~ span#some-text{
display:inline;
}
input#systematic-input:checked ~ span#some-text{
display:none;
}
/*The input is only visible when the spinner format isn't applied (i.e. commenting all CSS below this point). Even so, the hide/show effect doesn't work. Why?*/
/*
input#spinner-on {
display:none;
}
input#on-input:checked ~ input#spinner-on{
display:inline;
}
input#off-input:checked ~ input#spinner-on{
display:none;
}
*/
最佳答案
jQueryUI 微调器将输入包装在一个 span 元素中。
将微调器输入包装在您指定的新范围内,并相应地应用 CSS。
span#spinnerWrapper {
display:none;
}
input#on-input:checked ~ span#spinnerWrapper{
display:inline;
}
input#off-input:checked ~ span#spinnerWrapper{
display:none;
}
检查这个 jsFiddle
关于jquery - 切换 HTML "spinner"输入的显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47603247/