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

我的小提琴：JSFiddle

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

提前致谢。

Answer 1

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

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

<强> Working Demo

Answer 2

使其与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项目更改其位置，则需要删除绝对定位。请在此处查看：http://jsfiddle.net/KJ3Da/2/

Answer 3

如Shomz所说，如果要使用content属性，则应始终使用:before或:after伪选择器。为了保持切换按钮的基本样式，您应该将内容属性与其他属性分开。否则，基本样式只会影响.toggleButton:before而不影响.toggleButton.expanded:before。所以只需将其添加到CSS中即可。

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

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

当然，从您的HTML中删除+，从CSS中删除.toggleButton.expanded的样式声明。祝你好运！

JavaScript切换div

3 个答案: