切換點擊

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>