JavaScript 切换 div

Question

基本上我正在尝试切换一个 div。这是我的 html:

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

还有我的 CSS:

.toggleButton
{
    left: 50%;
    position: absolute;
    top: 20%;
    z-index: 1;
}
.toggleButton.expanded{
  content: "-";
}
#top-bar
{
    position: absolute;
    background: linear-gradient(black, #F2F2F2);
    width:100%;
    height: 50px;
    top: 0;
    left: 0;
    padding-bottom: 5px;
}

还有我的 JavaScript:

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

我的 fiddle 在这里:JSFiddle

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

提前致谢。

Answer 1

使其与 CSS content 规则一起工作的最简单方法是使其成为 :before 或 :after 伪元素。

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

在这里查看:http://jsfiddle.net/KJ3Da/1/

如果你想让它的位置根据topnav item改变，你需要去掉绝对定位。在这里查看:http://jsfiddle.net/KJ3Da/2/