我有一个简单的下拉菜单,根据选择的内容显示和隐藏div。
我希望每个选择都显示两个div(“。buzzard”和“ .pattern1”),但我不知道如何标记它们。
请参阅Fiddle
<div class="dropdown">
<select id="opts" data-target=".my-info-1">
<option value="buzzard" data-show=".buzzard">Buzzard</option>
...
</select>
</div>
<div class="my-info-1">
<div class="buzzard hide">The buzzard is by far the most common of all our birds of prey, and its expansion has been dramatic</div>
...
<div class="pattern1 hide"><h4>Distribution</h4><img src="#"></div>
...
</div>
<script>
$('select#opts').change(function() {
var target = $(this).data('target');
$(target).children().addClass('hide');
var show = $("option:selected", this).data('show');
$(show).removeClass('hide');
});
</script>
.hide {
display: none;
}
我努力了
<option value="buzzard" data-show=".buzzard .pattern">Buzzard</option>
最佳答案
您应该使用,
像.buzzard,.pattern
请记住,$接受selector css syntax,空格记号“后代”为逗号记号“ or”
例:$('.class1 .class2')
将捕获class2的其他元素位于class1的其他元素内
<div class="class1">
<div>
<div class="class2">
</div>
</div>
</div>
$('.class1, .class2')
将捕获具有类1或类2的元素<div class="class1 class2">
</div>
这个例子:
https://jsfiddle.net/L0zpg6d0/4/