JavaScript切换div

基本上，我正在尝试切换div。以下是我的html：

        <div id='top-bar'>   
    </div>
    <div class="toggleButton" >+</div>

还有我的JavaScript：

$(document).ready(function() {
var $content = $("#top-bar").show();
$(".toggleButton").on("click", function(e) {
    $(this).toggleClass("expanded");
    $content.slideToggle();
});
});

还有我的小提琴：

当我切换时，顶栏div确实向上移动了。但切换按钮的内容不会更改为“-”，也不会向上移动。我想知道如何解决这个问题

---

提前感谢。

您可以检查切换类是否存在，然后设置其html：

if( $(this).hasClass('expanded'))
 $(this).html('+');
else
 $(this).html('-');

---

使用CSS

内容

规则的最简单方法是将其设置为

：在
之前或
：之后的伪元素

.toggleButton:before
{
    left: 50%;
    position: absolute;
    top: 20%;
    z-index: 1;
    content: "+";
}
.toggleButton.expanded:before{
  content: "-";
}

请看这里：

如果您想根据topnav项目更改其位置，则需要删除绝对位置。查看此处：
如Shomz所说，如果要使用content属性，则应始终使用
：before
或
：after
伪选择器。为了保持切换按钮的基本样式，应将内容属性与其他属性分开设置。否则，基本样式将只影响
.toggleButton:before
而不影响
.toggleButton.expanded:before
。所以只需将其添加到CSS中

.toggleButton:before {
    content: "+";
}

.toggleButton.expanded:before {
    content: "-";
}

当然，从HTML中删除
+
，并从CSS中删除
.toggleButton.expanded
的样式声明。祝你好运
 但当顶部栏隐藏时，toggleButton不会向上移动。你有什么想法吗？是的，刚刚更新了我的答案。这是因为绝对定位，我添加了一个简单的修复，虽然有很多方法可以做到。但是如果我删除position属性，z索引就不起作用了。所以div隐藏在另一个div下尝试相对位置。如果我放置relative，它仍然隐藏在顶条div下。你知道吗？但是当顶条隐藏时，toggleButton不会向上移动。你有什么想法吗？@add position:relative；要
切换按钮
，请删除顶部栏的绝对位置。检查：但是如果我删除绝对位置，切换按钮将隐藏在顶部栏下。我检查了它。但当我将位置更改为“相对”时，“+”符号不显示，边距和填充无效。你知道吗？]
.toggleButton:before {
    content: "+";
}

.toggleButton.expanded:before {
    content: "-";
}