Question

我正在尝试将包含多个数据表的页面组合在一起。由于页面可能变长，我希望用户能够通过单击标题来折叠表。我计划使用+图标表示有更多可用内容，并且 - 图标表示它是可折叠的。所以我需要切换作为图标的i标签的类名。就像我说的那样，页面可以包含几个具有相同i标签的表格，所以我需要一些东西来涵盖那个

以下是HTML示例。

<table class="table table-bordered">
        <thead class="heading" id="thead">
      <tr id="tr">
         <th id="th" colspan="3"><i class="icon-plus"></i> Basic info</th>
      </tr>
    </thead>
    <tbody class="content">
        <tr>
          <td>Registration</td>
          <td>ABC 123</td>
          <td>&nbsp;</td>
        </tr>
        </tbody>
</table>

<table class="table table-bordered">
        <thead class="heading" id="thead">
      <tr id="tr">
         <th id="th" colspan="3"><i class="icon-plus"></i> More info</th>
      </tr>
    </thead>
    <tbody class="content">
        <tr>
          <td>Start time</td>
          <td>11:57</td>
          <td>&nbsp;</td>
        </tr>
        </tbody>
</table>

这是脚本

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('.content').show();
  jQuery('.heading').click(function()
  {
    jQuery(this).next('.content').slideToggle('0');
    jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
  });
});
</script>

显示和隐藏tbody工作正常，但我无法更改图标，任何线索？

Answer 1

尝试更改

jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');

到

jQuery(this).find('i').toggleClass('icon-plus icon-minus');

Answer 2

ok首先，永远不要在页面中为多个元素提供相同的ID ...永远。非常糟糕的做法，当需要引用一个特定元素时会引起并发症。

对于jquery，请使用addClass和removeClass：

jquery('.headingClass').removeClass('.headingclass');
jquery(this + 'i').addClass('.headingclass');

像这样：

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('.content').show();
  jQuery('.heading').click(function()
  {
    jquery('.headingClass').removeClass('.headingclass');
    jquery(this + 'i').addClass('.headingclass');
    jQuery(this).next('.content').slideToggle('0');
    jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
  });
});
</script>

Answer 3

而不是jQuery(this).parent().next("i")，请使用jQuery(this).find("i")

在您的示例中，jQuery(this)是thead元素;您要引用的i元素是后代，而不是兄弟，因此.parent().next("i")会尝试匹配与thead和tbody元素处于同一级别的元素！

Answer 4

试试这个（没有+和 - 的图标）

注意：我稍微更改了标记。

CSS

i { padding:4px; cursor:pointer; }
.icon-minus {  color :red; }
.icon-minus:before { content:"-";}
.icon-plus { color :green }
.icon-plus:before { content:"+";}

HTML

<table class="table table-bordered">
<thead class="heading" >
    <tr >
        <th colspan="3" ><i class="icon-minus"></i>Basic info</th>
    </tr>
</thead>
<tbody class="content">
<tr>
    <td>Registration</td>
    <td>ABC 123</td>
    <td>&nbsp;</td>
</tr>
</tbody>
</table>

<table class="table table-bordered">
<thead class="heading" >
    <tr >
        <th colspan="3"> <i class="icon-minus"></i>More info</th>
    </tr>
</thead>
<tbody class="content">
<tr>
    <td>Start time</td>
    <td>11:57</td>
    <td>&nbsp;</td>
</tr>
</tbody>
</table>

<强>的jQuery

jQuery('.heading').bind('click',function(){
       jQuery(this).siblings('tbody').slideToggle('0');
       jQuery(this).find('i').toggleClass('icon-minus icon-plus');
});

<强> DEMO

更改特定标记的类

4 个答案:

CSS

HTML