hide Elemente in der Tabelle mit Javascript

Question

ich gearbeitet haben, einen Tisch zu machen haben ein Verhalten wie folgt aus:

Wie Sie sehen können, wenn Sie in den Pfeil klicken, wird der Inhalt versteckt angezeigt wird, und der andere Web-Elemente werden nicht nach oben verschoben. Sie können sehen, wie es sich in this page verhält.

Ich habe versucht, die Funktionalität zu replizieren, aber ich habe es nicht verstanden. Wenn ich auf ein Objekt klicke, das nicht sichtbar ist, ist es kein fließender Übergang. Außerdem ist die gesamte Seite nach oben oder unten verschoben (nicht nur das Objekt, das ich ausblenden möchte).

Ich erstellte meine eigene Tabelle, ähnlich wie oben gezeigt.

Was ich tun möchte, ist:

1.Make Übergang (ausblenden oder anzeigen) glatter.

2. Vermeiden Sie, alle Elemente der Seite nach oben oder unten zu bewegen (beziehen Sie sich bitte auf den Hyperlink, den ich vorher bereitgestellt habe, um zu sehen, was ich brauche).

3. Verstecken Sie zwei oder mehr Elemente, zum Beispiel im obigen Bild Ich markierte mit blau, was ich verstecken/zeigen möchte.

Das ist mein Tabellencode:

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

Mein 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 
      }); 
     }); 

    }); 

Dank!

Answer 1

Wie in der Dokumentation des Bootstrap gegeben, Es gibt ein [Zusammenbruch Layout], die Sie für diesen Fall nutzen können.

Bootstrap Referenz: https://getbootstrap.com/docs/4.0/components/collapse/

Beispielcode Referenz:

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

Answer 2

Die übereinstimmenden/ausgewählten Elemente werden sofort ohne Animation ausgeblendet. Wenn wir die Funktion duration, plain object oder callback anwenden, wird .hide() zu einer Animationsmethode. Es animiert die Höhe, Breite und Opazität der ausgewählten/übereinstimmenden Elemente gleichzeitig.

Anstatt auf und ab können Sie Animate-Methode für andere Animationen verwenden.

http://dotnet-helpers.com/jquery/hide-effect-jquery/