javascript - 表格内的下拉菜单 (CSS/HTML/Java)

Question

我似乎遇到了一个问题，我想在我的表格中放置一个下拉“可扩展”选项。我试图用 Javascript 做到这一点，但它似乎总是只是将信息添加到右手栏。

我不擅长 HTML/CSS，并且非常愿意接受有关清理我的网页的任何建议。

我不希望它看起来像是我只是要求某人为我做这件事，我已经尝试了很多次但无济于事。

我的想法是让我的表格在“我的模块”中每个单元格的右上角都有一个小“v”，单击它时，会在表格中显示有关“模块”的更多信息。 (这是我表格中每个条目的样子):

Answer 1

下面是一些可以帮助您入门的代码，您可以首先向具有类 .expand 的元素添加一个 click 事件。单击此按钮后，您可以切换 隐藏的段落。我会让你试验这个......

我建议在用户体验方面做一些工作，但基 native 制已经有了。

$( document ).ready(function() {

    $(".expand").click( function () {

        // Show .description if hidden, hide if currently showing
        $(this).closest("td").find(".description").toggle();

        // A little bit of styling to show the user the content has been expanded
        if ( $(this).hasClass("blue-text") ) {
           $(this).removeClass("blue-text");
        } else {    
          $(this).addClass("blue-text");
        }
    
    });

});

.description {
  display:none;
}

.blue-text {
  color: blue;
}

table {
  font-family: arial, sans-serif;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  padding-top: 50px
}

td,
th {
  border: 1px solid rgb(200, 200, 200);
  text-align: center;
  padding: 8px;
}

th {
  font-weight: normal;
  background-color: rgba(222, 222, 222, 0.6)
}

.modules th {}

tr:hover {
  background-color: rgba(20, 91, 130, 0.3)
}

}

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active,
.collapsible:hover {
  background-color: #555;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <th>Module ID</th>
    <th width="70%">Module</th>
    <th>Credits</th>
    <th>Semester</th>
  </tr>
  <tr>
    <td>PHIL01</td>
    <td class="breakrow">
        <p>Introduction to CS <span class="expand">&#9660;</span></p>
        <p class="description">
           Some extra info here.
        </p>
    </td>
    <td>20</td>
    <td>Winter</td>
  </tr>
  <tr>
    <td>PHIL01</td>
    <td class="breakrow">
        <p>Introduction to Uni <span class="expand">&#9660;</span></p>
        <p class="description">
          Some extra info here.
        </p>
    </td>
    <td>20</td>
    <td>Winter</td>
  </tr>
  <tr>
    <td>PHIL01</td>
    <td class="breakrow">Introduction to German</td>
    <td>20</td>
    <td>Winter</td>
  </tr>
  <tr>
    <td>PHIL01</td>
    <td class="breakrow">Introduction to Philosophy</td>
    <td>20</td>
    <td>Winter</td>
  </tr>
  <tr>
    <td>PHIL01</td>
    <td class="breakrow">Introduction to Philosophy</td>
    <td>20</td>
    <td>Winter</td>
  </tr>
  <tr>
    <td>PHIL01</td>
    <td class="breakrow">Introduction to Philosophy</td>
    <td>20</td>
    <td>Winter</td>
  </tr>

</table>