添加 +/- 以折叠菜单答案

【问题标题】：Adding +/- to collapse menu添加 +/- 以折叠菜单
【发布时间】：2014-05-29 00:55:22
【问题描述】：

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

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

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

【问题讨论】：

发布一些你尝试过的代码
那么，你问我们什么？你有没有尝试过？
我什至不确定如何添加 +/- 元素以在两者之间切换。代码在链接中引用。
@user1052448：在this问题中发布您的代码。
添加一个可点击的元素（如<div>），其中包含文本。然后使用 Javascript/jQuery（无论您喜欢哪个）来处理更改 +/- 和折叠/展开内容之间的文本。

标签： html css

【解决方案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();
});

【讨论】：

【解决方案2】：

要渲染+ 和- 你可以尝试使用:before 伪元素，但这只是一个小问题，问题是你的代码，它确实太乱了，我修改了很多让它更完美的。首先，您不需要这样分配给每个td 的类expand1 和expand2。您可以利用 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.

您可以看到代码更加简洁明了。以下是一些相关参考资料：

【讨论】：