0

我正在尝试将包含多个数据表的页面放在一起。由于页面可能会变长，我希望用户能够通过单击标题来折叠表格。我计划使用 + 图标表示有更多可用内容，使用 - 图标表示它是可折叠的。所以我需要切换作为图标的 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 的显示和隐藏工作正常，但我无法更改图标，有什么线索吗？

4

4 回答 4

3

尝试改变

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

到

jQuery(this).find('i').toggleClass('icon-plus icon-minus');
于 2012-08-10T10:57:36.890 回答
1

好的，首先永远不要在一个页面中为多个元素提供相同的 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>
于 2012-08-10T10:57:39.517 回答
1

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

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

于 2012-08-10T11:01:05.390 回答
0

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

注意：我已经稍微改变了标记。

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

​</p>

演示

于 2012-08-10T11:20:52.853 回答