单击任何行时如何切换（）显示/隐藏下一个表行答案

【问题标题】：How I can toggle() show/hide next table row when click on any of rows单击任何行时如何切换（）显示/隐藏下一个表行
【发布时间】：2019-06-14 17:51:01
【问题描述】：

当我点击任何行时，如何切换（）隐藏/显示下一个表格行内容？我正在尝试创建可扩展的表格行。

这是我的 Javascript 代码：在这里，我试图最初隐藏所有没有 class="accordion" 的行然后通过单击任何行我需要显示下一行元素（rowContent）

 $(function() {
            var $research = $('.treat-table');
            $research.find("tr").not('.accordion').hide();
            $research.find("tr").eq(0).show();

            $research.find(".accordion").click(function(){
                $(this).next("tr").toggle();
            })
        });

table.basic-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: none;
  margin-bottom: 15px;
}

table.basic-table th {
  background-color: #66676b;
  text-align: left;
  color: #fff;
  vertical-align: top;
  font-weight: 500;
}

table.basic-table th:first-child {
  border-radius: 4px 0 0 4px;
}

table.basic-table th:last-child {
  border-radius: 0 4px 4px 0;
}

table.basic-table th,
table.basic-table td {
  padding: 15px 28px;
}

table.basic-table tr:nth-child(odd) {
  background-color: #f6f6f6
}

table.basic-table {
  margin-bottom: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


<table class="basic-table treat-table">

  <tr>
    <th>ID</th>
    <th>Category</th>
    <th>Treatment Name</th>
    <th>Price</th>
    <th>+</th>
  </tr>
 
  <!-- Row -->
  <tr class="accordion">
    <td>1</td>
    <td>Plastic surgery</td>
    <td>Nose job</td>
    <td>from 2000$</td>
    <td>+</td>
  </tr>
  <tr class="rowContent">
    <td colspan="5">
    <h5>This is content</h5>
    <p>This area show hided content</p>
    </td>
  </tr>
 <!-- Row -->
  <tr class="accordion">
    <td>1</td>
    <td>Plastic surgery</td>
    <td>Nose job</td>
    <td>from 2000$</td>
    <td>+</td>
  </tr>
  <tr class="rowContent">
    <td colspan="5">
    <h5>This is content</h5>
    <p>This area show hided content</p>
    </td>
  </tr>


</table>

我正在尝试使用 next() 方法来选择下一个元素，然后在运行 onclick 任何行的函数中调用 toggle() 方法。

【问题讨论】：

您似乎没有在任何地方使用您的 .research 课程。
我编辑它并将treat-table 类添加到我的

对我来说看起来不错，它按预期工作。不是吗？

标签： javascript jquery html

【解决方案1】：

看起来有 2 件事正在发生。一方面，没有使用 .research 类，另一方面，Toggle() 不存在。检查切换（）。希望对您有所帮助。

$(function() {
            var $research = $('.research');
            $research.find("tr").not('.accordion').hide();
            $research.find("tr").eq(0).show();

            $research.find(".accordion").click(function(){
                $(this).next("tr").toggle();
            })
        });

table.basic-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: none;
  margin-bottom: 15px;
}

table.basic-table th {
  background-color: #66676b;
  text-align: left;
  color: #fff;
  vertical-align: top;
  font-weight: 500;
}

table.basic-table th:first-child {
  border-radius: 4px 0 0 4px;
}

table.basic-table th:last-child {
  border-radius: 0 4px 4px 0;
}

table.basic-table th,
table.basic-table td {
  padding: 15px 28px;
}

table.basic-table tr:nth-child(odd) {
  background-color: #f6f6f6
}

table.basic-table {
  margin-bottom: 0;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


<table class="basic-table treat-table research">

  <tr>
    <th>ID</th>
    <th>Category</th>
    <th>Treatment Name</th>
    <th>Price</th>
    <th>+</th>
  </tr>
 
  <!-- Row -->
  <tr class="accordion">
    <td>1</td>
    <td>Plastic surgery</td>
    <td>Nose job</td>
    <td>from 2000$</td>
    <td>+</td>
  </tr>
  <tr class="rowContent">
    <td colspan="5">
    <h5>This is content</h5>
    <p>This area show hided content</p>
    </td>
  </tr>

</table>

【讨论】：

我对其进行了编辑，并将 .research 类更改为 .treat-table，现在请帮助我，因为它无论如何都不起作用

【解决方案2】：

保持HTML DOM 和CSS 相同，用下面的code 替换您的jQuery 代码希望它有效。

$(function() {
    $('.rowContent').hide();
    $(".basic-table .accordion").click(function() {
       (".rowContent").not($(this).next()).hide();
        $(this).next(".rowContent").toggle();
    })
});

$(function() {
            $('.rowContent').hide();
            $(".basic-table .accordion").click(function(){
            $(".rowContent").not($(this).next()).hide();
                $(this).next(".rowContent").toggle();
            })
        });

table.basic-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: none;
  margin-bottom: 15px;
}

table.basic-table th {
  background-color: #66676b;
  text-align: left;
  color: #fff;
  vertical-align: top;
  font-weight: 500;
}

table.basic-table th:first-child {
  border-radius: 4px 0 0 4px;
}

table.basic-table th:last-child {
  border-radius: 0 4px 4px 0;
}

table.basic-table th,
table.basic-table td {
  padding: 15px 28px;
}

table.basic-table tr:nth-child(odd) {
  background-color: #f6f6f6
}

table.basic-table {
  margin-bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>


<table class="basic-table treat-table">

  <tr>
    <th>ID</th>
    <th>Category</th>
    <th>Treatment Name</th>
    <th>Price</th>
    <th>+</th>
  </tr>
 
  <!-- Row -->
  <tr class="accordion">
    <td>1</td>
    <td>Plastic surgery</td>
    <td>Nose job</td>
    <td>from 2000$</td>
    <td>+</td>
  </tr>
  <tr class="rowContent">
    <td colspan="5">
    <h5>This is content</h5>
    <p>This area show hided content</p>
    </td>
  </tr>
 <!-- Row -->
  <tr class="accordion">
    <td>1</td>
    <td>Plastic surgery</td>
    <td>Nose job</td>
    <td>from 2000$</td>
    <td>+</td>
  </tr>
  <tr class="rowContent">
    <td colspan="5">
    <h5>This is content</h5>
    <p>This area show hided content</p>
    </td>
  </tr>


</table>

如果不起作用，请发表评论。

【讨论】：