嗨,我在让以下内容正常工作方面遇到麻烦。只有第一个要素有效,我应该怎么看?
<div class="hi">
<a id="tabBtn" href="javascript:void(0)"></a>
</div>
<div class="hi">
<a id="tabBtn" href="javascript:void(0)"></a>
</div>
<div class="hi">
<a id="tabBtn" href="javascript:void(0)"></a>
</div>
<script>
$('#tabBtn').on("click",function(){
if ($(this).parent('.hi').css('max-height') == '65px'){
$(this).parent(".hi").addClass('open');
}
else{
$(this).parent(".hi").removeClass('open');
}
})
</script>
最佳答案
对多个元素使用相同的id
无效,请改用class
:
$('.tabBtn').on("click", function() {
if ($(this).parent('.job').css('max-height') == '65px') {
$(this).parent(".job").addClass('open');
} else {
$(this).parent(".job").removeClass('open');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="hi">
<a class="tabBtn" href="javascript:void(0)">Hello</a>
</div>
<div class="hi">
<a class="tabBtn" href="javascript:void(0)">Hello2</a>
</div>
<div class="hi">
<a class="tabBtn" href="javascript:void(0)">Hello3</a>
</div>