-2

我有一个显示子信息的切换开关工作，但以下切换不起作用，我不知道如何解决这个问题。我使用了 w3schools 的代码来让它工作，但其他名称似乎并没有滑下来，只是显示它们。请问有什么想法吗？

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
    </script>
   <script> 
    $(document).ready(function(){
     $("#flip").click(function(){
     $("#panel").slideToggle("slow");
    });
    });
    </script>

    <style type="text/css"> 
     #panel,#flip
   {
     padding:5px;
    text-align:center;
     background-color:#e5eecc;
     border:solid 1px #c3c3c3;
      }
    #panel
    {
    padding:50px;
   display:none;
   }
   </style>


    $connect = mysql_connect("127.0.0.1" , "root" , "") or die ("Couldnt connect to database");
    mysql_select_db("travellerfile") or die ("couldnt find the database");

    $searchsurname = $_POST['Surname'];
    $searchfirstname = $_POST['Firstname'];
    $searchage = $_POST['Age'];

    $query = mysql_query("SELECT * FROM child WHERE Surname like '%$searchsurname%' and Firstname like '%$searchfirstname%' and Age like '%$searchage%'");
    while($row = mysql_fetch_array($query))
    {
    ?>
    <div id="flip"><?php echo $row['Firstname']; ?> <?php echo $row['Surname']; ?></div>
    <div id="panel"><?php echo $row['DateOfBirth']; ?> <br /> <img src="<?php echo $row['sourcepath']; ?>" width="100px" height="100px"> <form method="post" action="childdetail.php">
                <input name="Button1" type="submit" value="View" /></form>

4

1 回答 1

1

您不能有重复id的元素，我建议您将它们更改为类：

<div class="flip"> 
<div class="panel">

至于 jQuery，你需要panel根据slideToggle对应的flip. 鉴于您当前的结构，您可以使用以下内容：-

$('.flip').click(function() {
  $(this).next('.panel').slideToggle('slow'); 
});

这是您尝试实现的目标的简化示例

于 2013-04-03T09:56:54.437 回答