切换点击

Question

我遇到的情况是我使用Bootstrap崩溃来创建不断增长和缩小的内容。

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

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

 <script>

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

通过在my-btn之后添加open类，箭头会被更改......但是如何使用CSS / js实现这一点呢？

更新

我试过了

InputStream

但是在切换时，bootstrap添加了折叠类，但我的代码被忽略了。

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。

Answer 2

您可以使用点击功能与切换类功能快速轻松地实现此功能，以便在点击按钮后添加/删除课程。

请参阅下面的工作代码。

＆＃13;

＆＃13;

$('.btn').on('click', function() {
    $(this).toggleClass('open');
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用toggleClass() function：

$('.my-btn').on('click', function() {
    $(this).toggleClass('open');
});