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

Question

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

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

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

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

标签： javascripthtmlcss

Answer 1

下面是一些可以帮助您入门的代码，您可以从click使用 class 向元素添加事件开始.expand。单击此按钮后，您可以toggle隐藏段落。我让你试试这个...

我建议在用户体验上做一点工作，但基本的机制就在那里。

$( 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>