切换点击

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; 
 
\t \t \t \t margin-bottom:50px; 
 
    } 
 

 
    .open{ 
 
\t 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>

通过我的-BTN后加入的公开课，箭头改变......但我怎么能达致这使用CSS/JS？

UPDATE

我已经试过

<script> 

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

但在切换，引导增加了坍塌类，但我的代码将被忽略。

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代码将切换“打开“类（如果存在，则将其删除，否则将其添加）。

请记住，所有浏览器都不支持classList.toggle功能。如果你想支持所有的浏览器，你可能需要使用一些polyfill。

Answer 2

可以使用toggleClass() function：

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

Answer 3

您可以使用上点击功能与切换类功能添加/点击您的按钮后，删除类结合快速，轻松地实现这一目标。

请参阅下面的工作代码。

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

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

 
    .open{ 
 
\t 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>