javascript - 点击切换

Question

我有一种情况，我正在使用 Bootstrap 折叠来创建不断增长和缩小的内容。

我有一个名为 my-btn 的类，它有一个向下箭头的背景图像。当我单击此按钮时，我想添加一个名为 open 的类。

    .my-btn{
    background-image:url(../img/template-1/read-more-closed.png);
                background-repeat:no-repeat;
                background-position:center;
                width:50px;
                height:50px;
				margin-bottom:50px;
    }

    .open{
	  background-image:url(../img/template-1/read-more-open.png);
                background-repeat:no-repeat;
                background-position:center;
                width:50px;
                height:50px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

 <button class="btn my-btn" type="button" data-toggle="collapse" data-target="#collapse4" 
                  aria-expanded="false" aria-controls="collapseExample">&nbsp;</button>

通过在 my-btn 之后添加 open 类，箭头发生了变化...但是我如何使用 CSS/js 实现这一点？

更新

我试过了

 <script>

$(document).ready(function(){
$('.my-btn').on('click', function(){
    $(this).toggleClass('open');
});
});   
          </script>

但是在切换时，bootstrap 添加了 collaPSED CLASS BUT MY CODE IS IGNORED。

Answer 1

你可以这样做:

.my-btn{
background-image:url(../img/template-1/read-more-closed.png);
            background-repeat:no-repeat;
            background-position:center;
            width:50px;
            height:50px;
            margin-bottom:50px;
}

.open{
  background-image:url(../img/template-1/read-more-open.png);
            background-repeat:no-repeat;
            background-position:center;
            width:50px;
            height:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn my-btn" type="button" data-toggle="collapse" data-target="#collapse4" 
              aria-expanded="false" aria-controls="collapseExample" onclick="this.classList.toggle('open')">&nbsp;</button>

重要的部分是onclick="this.classList.toggle('open')"，这段JavaScript代码将切换“open”类(如果存在则移除它，如果存在则添加它没有)。

请记住，并非所有浏览器都支持 classList.toggle 函数。如果您想支持所有浏览器，您可能必须使用一些 polyfill。