Question

根据是否选中了广播框（受question启发），我找到了一种使用CSS切换span或input元素的可见性的方法。

但是，只要应用jQueryUI微调器格式，我就会失去这种切换效果。

此jsFiddle显示了CSS如何适用于span元素，但不适用于input。事实上，只要我应用微调器，整个input就会消失。

为什么会发生这种情况的任何线索，以及如何使用CSS切换其可见性？

这是我在小提琴中使用的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;
}
*/

Answer 1

jQueryUI微调器将输入包装在span元素中。

将微调器输入包装在您指定的新范围内，并相应地应用CSS。

span#spinnerWrapper {
     display:none;
}
input#on-input:checked ~ span#spinnerWrapper{
  display:inline;
}
input#off-input:checked ~ span#spinnerWrapper{
  display:none;
}

检查这个jsFiddle

http://jsfiddle.net/scc0jyns/2/

切换HTML“微调器”输入的显示

1 个答案: