JQ写层的显示和隐藏的问题


<script src="JS/jquery-1.3.2-vsdoc.js" type="text/javascript"></script>
  <script type="text/javascript" language="javascript">
      $(document).ready(function() {
          $("#title").click(function() {
            $("#child").toggle(500);
          })
      })
  </script>
</head><body>
 <div class="menu">
     <div class="menu_title" id="title">页面设置一</div>
     <div class="menuchild" id="child">
         <ul>
            <li><a href="one.html" target="main">第一个页面</a></li>
            <li><a href="two.html" target="main">第二个页面</a></li>
         </ul>
     </div>
     <div class="menu_title" id="title">页面设置二</div>
     <div class="menuchild" id="child">
         <ul>
            <li><a href="one.html" target="main">第一个页面</a></li>
            <li><a href="two.html" target="main">第二个页面</a></li>
         </ul>
     </div>
我像上面的遮阳写，点击“页面设置一”有效果，点击“页面设置二”就没效果了，大家帮我看看应该怎样修改才行！！！