我有这样的html结构:
<div class="container">
<dt class="odd">...</dt>
<dd class="odd">...</dd>
<dt class="even">...</dt>
<dd class="even">...</dd>
<dt class="odd">...</dt>
<dd class="odd">...</dd>
<dt class="even">...</dt>
<dd class="even">...</dd>
</div>
上面的结构具有奇数类的
dt
和偶数类的dt
,我要的是当我单击奇数类的dt
时,下一个奇数类的dd
将显示或隐藏,但是问题是我dd的on click函数根本不会触发,这是代码:$( "dt.odd" ).click(function() {
alert('odd');
$(this).parent().next('dd.odd').show();
});
最佳答案
试试这个,也许这会帮助你
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
dt{
display:block;
}
dd{
display:none;
}
</style>
<script>
$(document).ready(function(){
$( "dt.odd" ).click(function() {
$(this).next().show();
});
});
</script>
</head>
<body>
<div class="container">
<dt class="odd">...</dt>
<dd class="odd">...</dd>
<dt class="even">...</dt>
<dd class="even">...</dd>
<dt class="odd">...</dt>
<dd class="odd">...</dd>
<dt class="even">...</dt>
<dd class="even">...</dd>
</div>
</body>
</html>