Question

在这里，我能够在这里得到一些人的帮助。但是，我想在展开/折叠行时添加它以包含 - / +。

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<table class="table2">
<th></th><th>server 1</th><th>server 2</th>
<tr><td class="btn">used</td><td>1gb</td><td>2gb</td></tr>
<tr><td class="expand1">drive 1</td><td class="expand1">0.5gb</td><td class="expand1">1gb</td></tr>
<tr><td class="expand1">drive 2</td><td class="expand1">0.5gb</td><td class="expand1">1gb</td></tr>

<tr><td class="btn2">available</td><td>1gb</td><td>2gb</td></tr>
<tr><td class="expand2">drive 1</td><td class="expand2">0.5gb</td><td class="expand2">1gb</td></tr>
<tr><td class="expand2">drive 2</td><td class="expand2">0.5gb</td><td      class="expand2">1gb</td></tr>
<tr><td>total</td><td>2gb</td><td>4gb</td></tr>
</table>

CSS

.expand1 { display: none;
}

.expand2 { display: none;
}

JS

$(document).ready(function(){
  $(".btn").click(function(){
     $(".expand1").toggle();
  });
  $(".btn2").click(function(){
     $(".expand2").toggle();
  });
})

Answer 1

我更新了你的小提琴：http://jsfiddle.net/5BRsy/7/

基本上，您正在添加某种用于表示切换的html。在您的情况下，我使用了<span>+</span>。

<tr><td class="btn"><span>+</span> used</td><td>1gb</td><td>2gb</td></tr>

然后，当您点击<span>（或我应该说的+号）时，您切换内容的显示，就像您现在所做的那样，然后将您的+更改为 - 。再次点击它可以将其切换回原样。

$(document).ready(function(){
    $(".btn span").click(function(){
        if($(".btn span").html() == "+") {
            $(".btn span").html("-");
        } else {
            $(".btn span").html("+");
        }
    $(".expand1").toggle();
});

Answer 2

要呈现+和-，您可以尝试使用:before伪元素，但这只是一个小问题，问题是您的代码，它是＆＃39确实太乱了，我修改了它以使它更完美。首先，您不需要为每个expand1分配expand2和td课程。您可以利用jQuery选择器最初隐藏行并在点击时切换行。这是修改后的代码：

<强> HTML ：

<table>
 <th></th><th>server 1</th><th>server 2</th>
 <tr><td class="btn">used</td><td>1gb</td><td>2gb</td></tr>
 <tr><td>drive 1</td><td>0.5gb</td><td>1gb</td></tr>
 <tr><td>drive 2</td><td>0.5gb</td><td>1gb</td></tr>

 <tr><td class="btn">available</td><td>1gb</td><td>2gb</td></tr>
 <tr><td>drive 1</td><td>0.5gb</td><td>1gb</td></tr>
 <tr><td>drive 2</td><td>0.5gb</td><td>1gb</td></tr>
 <tr><td>total</td><td>2gb</td><td>4gb</td></tr>
</table>

<强> CSS ：

.btn:before {
  content:'+ ';
  vertical-align:middle;
}
.btn.expanded:before {
  content:'- ';
  vertical-align:top;
}

<强> JS ：

//hide the rows initially
$('.btn').closest('tr').nextUntil('tr:has(td.btn)')
                   .not(':last-child').toggle();
//register click handler on ready
$(document).ready(function(){
  $(".btn").click(function(){
    $(this).closest('tr').nextUntil('tr:has(td.btn)')
                         .not(':last-child').toggle();
    $(this).toggleClass('expanded');
  });
});

Demo.

您可以看到代码更简洁，更清晰。以下是一些相关的参考资料：

向折叠菜单添加+/-

2 个答案:

Demo.