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

时间：2019-01-21 10:47:39

标签： javascript jquery html

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

这是我的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（）方法。

2 个答案:

答案 0 :(得分：0)

看起来正在发生两件事。一方面，不使用.research类，另一方面，不存在Toggle（）。检查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>

答案 1 :(得分：0)

保持HTML DOM和CSS相同，将您的jQuery代码替换为下面的code，希望它能起作用。

$(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>
如果不起作用，请发表评论。

相关问题
最新问题