我有这样的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>

09-17 15:45