为什么我的jQuery滑落在我的表中不起作用

Why does my jQuery slidedown not work in my table?

本文关键字：我的 不起作用 jQuery 为什么      更新时间：2023-09-26

我试图让滑块工作，但它根本无法正常工作。当我不使用表格时它可以工作，但对于我的网站，我需要一个可以显示成员的表格。我的代码有什么问题？信息必须在名称下方，而不是在名称旁边。

<!DOCTYPE html>
<html>
<head>
<title>Bestuur</title>
<link rel="icon" href="images/favicon.png">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideToggle("slow");
        });
    });
</script>
<style type="text/css">
    body {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    }
    table {
        border-collapse: collapse;
    }
    th, td {
        padding: 8px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }
    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 1px solid #e7e7e7;
        background-color: #f3f3f3;
    }
    li {
        float: left;
    }
    li a {
        display: block;
        color: #666;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    li a:hover:not(.active) {
        background-color: #ddd;
    }
    li a.active {
        color: white;
        background-color: #42a5f5;
    }
    #panel, #flip {
        padding: 5px;
    }
    #panel {
        display: none;
    }
</style>
</head>
<ul class="horizontal gray">
<li><a class="active" href="index.php">Bestuur</a></li>
<li><a href="bestuurWijzigen.php">Bestuur wijzigen</a></li>
<li><a href="bestuurToevoegen.php">Bestuur toevoegen</a></li>
</ul>
<div>
<table class="table" border="1" frame="void" rules="rows">
    <tbody>
    <tr>
        <th>Naam</th>
        <th>Functie</th>
    </tr>
    <tr>
        <td><div id="flip">Pieter Schreurs</td>
        <td>
            <label for="pieter">Secretaris</label>
        </div></td>
        <td><div id="panel">Hidden information</div></td>
    </tr>
    <tr>
        <td>Wessel Oblink</td>
        <td>
            <label for="wessel">Penningmeester</label>
        </td>
    </tr>
    <tr>
        <td>Luca Fraser</td>
        <td>
            <label for="luca">Voorzitter</label>
        </td>
    </tr>
    </tbody>
</table>
</div>
</html>

我整理了你的标记 - div s 和 td s 关闭不正确并移动了#panel.这就是你所追求的吗？

$(document).ready(function() {
  $("#flip").click(function() {
    $("#panel").slideToggle("slow");
  });
});
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
table {
  border-collapse: collapse;
}
th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}
li {
  float: left;
}
li a {
  display: block;
  color: #666;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover:not(.active) {
  background-color: #ddd;
}
li a.active {
  color: white;
  background-color: #42a5f5;
}
#panel,
#flip {
  padding: 5px;
}
#panel {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="horizontal gray">
  <li><a class="active" href="index.php">Bestuur</a></li>
  <li><a href="bestuurWijzigen.php">Bestuur wijzigen</a></li>
  <li><a href="bestuurToevoegen.php">Bestuur toevoegen</a></li>
</ul>
<div>
  <table class="table" border="1" frame="void" rules="rows">
    <tbody>
      <tr>
        <th>Naam</th>
        <th>Functie</th>
      </tr>
      <tr>
        <td width="200">
          <div id="flip">Pieter Schreurs</div>
          <div id="panel">Hidden information</div>
        </td>
        <td>
          <label for="pieter">Secretaris</label>
        </td>
      </tr>
      <tr>
        <td>Wessel Oblink</td>
        <td>
          <label for="wessel">Penningmeester</label>
        </td>
      </tr>
      <tr>
        <td>Luca Fraser</td>
        <td>
          <label for="luca">Voorzitter</label>
        </td>
      </tr>
    </tbody>
  </table>
</div>

有一些标签是你永远不会关闭的。修复这些问题，然后将#flip移动到td内，或者删除该div并将父tr设置为具有该 ID。

我更改了实现，以便"Functie"不会移动。

演示 

 $(document).ready(function(){
        $("#flip").click(function(){
            $("#panel").slideToggle("slow");
        });
    });
body {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
table {
    border-collapse: collapse;
    table-layout: fixed;
}
th, td {
    width: 150px;
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #e7e7e7;
    background-color: #f3f3f3;
}
li {
    float: left;
}
li a {
    display: block;
    color: #666;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}
li a:hover:not(.active) {
    background-color: #ddd;
}
li a.active {
    color: white;
    background-color: #42a5f5;
}
#panel, #flip {
    padding: 5px;
}
#panel {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="horizontal gray">
<li><a class="active" href="index.php">Bestuur</a></li>
<li><a href="bestuurWijzigen.php">Bestuur wijzigen</a></li>
<li><a href="bestuurToevoegen.php">Bestuur toevoegen</a></li>
</ul>
<div>
<table class="table" border="1" frame="void" rules="rows">
    <tbody>
      <tr>
        <th>Naam</th>
        <th>Functie</th>
      </tr>
      <tr id="flip">
         <td>Pieter Schreurs<div id="panel">Hidden information</div></td>
         <td>
           <label for="pieter">Secretaris</label>
         </td>
      </tr>
      <tr>
        <td>Wessel Oblink</td>
        <td>
            <label for="wessel">Penningmeester</label>
        </td>
      </tr>
      <tr>
        <td>Luca Fraser</td>
        <td>
            <label for="luca">Voorzitter</label>
        </td>
      </tr>
    </tbody>
</table>
</div>

相关文章：