我在<select>
中有一个<form>
框,当其值为other
时,我希望隐藏具有类.applicableSupportCase
的元素。我试图用CSS做这件事。我做错了什么?
.applicableSupportCase {
transition: transform 0.3s ease, opacity 0.3s ease;
}
#typeBox[value="other"] ~ .applicableSupportCase{
opacity: 0;
transform: scaleY(0);
}
<select class="contactField" id="typeBox">
<option value="supportCase" selected="selected">Support case</option>
<option value="other">Other</option>
</select>
<label class="applicableSupportCase">Device:</label>
applicableSupportCase
类有更多元素,但你明白了。
答案 0 :(得分:5)
实际上,css属性选择器不会以您的思维方式看待价值......
虽然Javascript将value
属性视为所选选项的值,但CSS只看到标记,而select[value='something']
属性选择器实际上会查找此内容:
<select value='something'>
不适用于所选的<option>
。
通过css-only,您将无法使用所选选项更改其他元素,因为<option>
嵌套在<select>
标记上,并且css上没有父导航选择
修改强>
然而,您可以使用javascript对其进行模拟,然后保留您的css选择器。只需触发select on onchange事件即可将名为value
的属性设置为DOM select元素:
document.getElementById('typeBox').onchange = function() {
this.setAttribute('value', this.value);
};
答案 1 :(得分:1)
使用<select>
项无法完成此操作,但由于复选框和单选按钮的伪类:checked
状态,您可以使用这些来完成您想要的操作:
HTML
<input type="radio" id="supportCase" name="radios">
<label for="supportCase">Support Case</label>
<input type="radio" id="other" name="radios">
<label for="other">Other</label>
<br />
<label class="applicableSupportCase">Device:</label>
CSS
input[id=other]:checked ~ .applicableSupportCase {
visibility:hidden;
}
我使用了可见性,但您可以将属性更改为您想要的任何内容。
如果您想要轻松进出,请使用:not(:checked)
伪类创建相同的语句:
input[id=other]:not(:checked) ~ .applicableSupportCase {
//whatever ease(out) you want here
}
JSFiddle:http://jsfiddle.net/ja2ud1Lf/
答案 2 :(得分:0)
我会亲自为隐藏对象创建另一个类(例如&#39; hiddenClass&#39;),并使用类似于以下的jquery:
$( "#typeBox" ).change(function(){
if($("#typeBox").val()=="other")
{
$(".applicableSupportCase").each(function(){
$(this).addClass("hiddenClass");
});
}
});