如何在单击图标时显示隐藏的行？

时间：2017-06-26 18:39:10

标签： jquery

我有一个表，其中每一行还有一个隐藏的行，其中包含更多数据，当单击该特定行时，可以在手风琴中显示这些数据。我试图找出如何只在点击每一行上的图标而不是让整行“活动”时才显示隐藏行。感谢。

    <table class="table" width="100%;">
    <tbody>
    <tr class="accordion">
    <td><i class="icon-right-dir" id="arrow_2" data-toggle="collapse" data-parent="accordion"></i></td>
    <td>Test</td>
    <td>Data here</td>
    <td>Data here</td>
    <td>Data here</td>
    </tr>

         <tr class="hidden-row">
    <td colspan="12">

        <div class="row">
     <div class="col-xs-12">

        <h4>Data here</h4>

            </div>
            </div>

         </td>
    </tr>


....More rows here
</tbody>
</table>

Jquery的

    $(document).ready(function(){ 
                $(function() {
    var $table = $('.table');
    $table.find('.hidden-row').hide();

    $table.find('.accordion').click(function(){
      $table.find('.accordion').not(this).nextAll('.hidden-row:first').fadeOut(500);
      $(this).nextAll('.hidden-row:first').slideToggle("slow");
       $(this).find('i').toggleClass('icon-right-dir icon-down-dir');
    });
});
            });

1 个答案:

答案 0 :(得分：3)

我会做这样的事情处理CSS中的所有演示文稿：

＆＃13;
＆＃13; 
$(function () {
  var $table = $("table");
  $table.find(".activator").click(function () {
    $(this).toggleClass("open");
  });
});
＆＃13; 
table {width: 50%; margin: auto; border: 1px solid #ccf;}
.activator {cursor: pointer;}
.activator.open,
.activator:hover {background: #ccf;}
.activator.open .fa-plus,
.activator .fa-minus,
.activator + .hidden-row {display: none;}
.activator.open + .hidden-row {display: table-row;}
.activator.open .fa-minus {display: inline-block;}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<table>
  <tbody>
    <tr class="activator">
      <td><i class="fa fa-plus"></i><i class="fa fa-minus"></i> Row 1</td>
    </tr>
    <tr class="hidden-row">
      <td>Row 1's Hidden</td>
    </tr>
    <tr class="activator">
      <td><i class="fa fa-plus"></i><i class="fa fa-minus"></i> Row 2</td>
    </tr>
    <tr class="hidden-row">
      <td>Row 2's Hidden</td>
    </tr>
    <tr class="activator">
      <td><i class="fa fa-plus"></i><i class="fa fa-minus"></i> Row 3</td>
    </tr>
    <tr class="hidden-row">
      <td>Row 3's Hidden</td>
    </tr>
    <tr class="activator">
      <td><i class="fa fa-plus"></i><i class="fa fa-minus"></i> Row 4</td>
    </tr>
    <tr class="hidden-row">
      <td>Row 4's Hidden</td>
    </tr>
    <tr class="activator">
      <td><i class="fa fa-plus"></i><i class="fa fa-minus"></i> Row 5</td>
    </tr>
    <tr class="hidden-row">
      <td>Row 5's Hidden</td>
    </tr>
    <tr class="activator">
      <td><i class="fa fa-plus"></i><i class="fa fa-minus"></i> Row 6</td>
    </tr>
    <tr class="hidden-row">
      <td>Row 6's Hidden</td>
    </tr>
    <tr class="activator">
      <td><i class="fa fa-plus"></i><i class="fa fa-minus"></i> Row 7</td>
    </tr>
    <tr class="hidden-row">
      <td>Row 7's Hidden</td>
    </tr>
    <tr class="activator">
      <td><i class="fa fa-plus"></i><i class="fa fa-minus"></i> Row 8</td>
    </tr>
    <tr class="hidden-row">
      <td>Row 8's Hidden</td>
    </tr>
    <tr class="activator">
      <td><i class="fa fa-plus"></i><i class="fa fa-minus"></i> Row 9</td>
    </tr>
    <tr class="hidden-row">
      <td>Row 9's Hidden</td>
    </tr>
    <tr class="activator">
      <td><i class="fa fa-plus"></i><i class="fa fa-minus"></i> Row 10</td>
    </tr>
    <tr class="hidden-row">
      <td>Row 10's Hidden</td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

如果你想要它像手风琴一样，你可以这样做：

＆＃13;
＆＃13; 
$(function () {
  var $table = $("table");
  $table.find(".activator").click(function () {
    if ($(this).hasClass("open"))
      $(this).removeClass("open");
    else {
      $(".open").removeClass("open");
      $(this).addClass("open");
    }
  });
});
＆＃13; 
table {width: 50%; margin: auto; border: 1px solid #ccf;}
.activator {cursor: pointer;}
.activator.open,
.activator:hover {background: #ccf;}
.activator.open .fa-plus,
.activator .fa-minus,
.activator + .hidden-row {display: none;}
.activator.open + .hidden-row {display: table-row;}
.activator.open .fa-minus {display: inline-block;}
＆＃13; 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<table>
  <tbody>
    <tr class="activator">
      <td><i class="fa fa-plus"></i><i class="fa fa-minus"></i> Row 1</td>
    </tr>
    <tr class="hidden-row">
      <td>Row 1's Hidden</td>
    </tr>
    <tr class="activator">
      <td><i class="fa fa-plus"></i><i class="fa fa-minus"></i> Row 2</td>
    </tr>
    <tr class="hidden-row">
      <td>Row 2's Hidden</td>
    </tr>
    <tr class="activator">
      <td><i class="fa fa-plus"></i><i class="fa fa-minus"></i> Row 3</td>
    </tr>
    <tr class="hidden-row">
      <td>Row 3's Hidden</td>
    </tr>
    <tr class="activator">
      <td><i class="fa fa-plus"></i><i class="fa fa-minus"></i> Row 4</td>
    </tr>
    <tr class="hidden-row">
      <td>Row 4's Hidden</td>
    </tr>
    <tr class="activator">
      <td><i class="fa fa-plus"></i><i class="fa fa-minus"></i> Row 5</td>
    </tr>
    <tr class="hidden-row">
      <td>Row 5's Hidden</td>
    </tr>
    <tr class="activator">
      <td><i class="fa fa-plus"></i><i class="fa fa-minus"></i> Row 6</td>
    </tr>
    <tr class="hidden-row">
      <td>Row 6's Hidden</td>
    </tr>
    <tr class="activator">
      <td><i class="fa fa-plus"></i><i class="fa fa-minus"></i> Row 7</td>
    </tr>
    <tr class="hidden-row">
      <td>Row 7's Hidden</td>
    </tr>
    <tr class="activator">
      <td><i class="fa fa-plus"></i><i class="fa fa-minus"></i> Row 8</td>
    </tr>
    <tr class="hidden-row">
      <td>Row 8's Hidden</td>
    </tr>
    <tr class="activator">
      <td><i class="fa fa-plus"></i><i class="fa fa-minus"></i> Row 9</td>
    </tr>
    <tr class="hidden-row">
      <td>Row 9's Hidden</td>
    </tr>
    <tr class="activator">
      <td><i class="fa fa-plus"></i><i class="fa fa-minus"></i> Row 10</td>
    </tr>
    <tr class="hidden-row">
      <td>Row 10's Hidden</td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

我最近写了Evolution of Drop Down Menus and Exiting Them，在那里我讨论了一些更有趣的组合。

相关问题
最新问题