javascript - 使用javascript隐藏表格中的元素

Question

我努力使表格具有如下行为:

如您所见，当您单击箭头时，会显示隐藏的内容，而其他 Web 元素不会向上或向下移动。您可以在 this page 中查看它的实际行为方式。 .

我试图复制功能，但我没有得到它。当我点击一个应该从 View 中隐藏的元素时，它不是一个平滑的过渡，而且，所有页面都向上或向下移动(不仅仅是我想隐藏的元素)。

我创建了自己的表，与上图类似。

我想做的是:

1.使过渡(隐藏或显示)更平滑。

2.避免上下移动页面的所有元素(请引用我之前提供的超链接，看看我需要什么)。

1. 隐藏两个或多个元素，例如上图中我用蓝色标记了我要隐藏/显示的内容。

这是我的表格代码:

<div class="container">
 //I added the style here because I am still testing the table
<table class="table " style="border-left: 1px solid #dddddd;border-right:#dddddd;">
    <tr class="header">
        <td colspan="4">Modulo 1: Introduction</td>
    </tr>
    <tr>
        <td class="curriculum-icon"><i class="icon-play"></i></td>
        <td><a href="http://themes.vibethemes.com/wplms/skins/demo1/unit/introduction-to-software-training/?id=1260">Introduction to Software Training</a><span class="header">x</span></td>
        <td><span class="free">FREE</span> </td>
        <td><span class="time"><i class="fa fa-clock-o"></i> 00:40:00</span></td>
    </tr>
    <tr>
        <td colspan="4" style="padding:15px;background:#f5f5f5;">
            Praesent sit amet lacus imperdiet, semper libero non, convallis lectus. Nunc nisi quam, dignissim ut luctus non, dignissim pellentesque massa. Etiam ac fermentum risus, vitae dictum quam.
        </td>
    </tr>
    <tr class="header">
        <td colspan="4">Modulo 2: Introduction</td>
    </tr>
    <tr>
        <td class="curriculum-icon"><i class="icon-play"></i></td>
        <td><a href="http://themes.vibethemes.com/wplms/skins/demo1/unit/introduction-to-software-training/?id=1260">Introduction asg</a><span class="header">x</span></td>
        <td><span class="free">FREE</span> </td>
        <td><span class="time"><i class="fa fa-clock-o"></i> 00:40:00</span></td>
    </tr>
    <tr>
        <td colspan="4" style="padding:15px;background:#f5f5f5;">
            Praesent sit amet lacus imperdiet, semper libero non, convallis lectus. Nunc nisi quam, dignissim ut luctus non, dignissim pellentesque massa. Etiam ac fermentum risus, vitae dictum quam.
        </td>
    </tr>
</table>

我的Javascript:

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

        $header = $(this);
        //getting the next element
        $content = $header.next();
        //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
        $content.slideToggle(500, function () {
            //execute this after slideToggle is done
            //change text of header based on visibility of content div
            $header.text(function () {
                //change text based on condition
                //do something 
            });
        });

    });

谢谢!

Answer 1

正如 boostrap 的文档中所给出的，有一个 [collapse layout] 可以用于这种情况。

引导引用:https://getbootstrap.com/docs/4.0/components/collapse/

示例代码引用:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
         Modulo 1: Introduction
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Sample A
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Modulo 2: Introduction
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Sample 2.
      </div>
    </div>
  </div>
</div>