Переключение по клику

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 будет переключать " open "(удалите его, если он существует, или добавьте его, если это не так).

Помните, что функция classList.toggle не поддерживается всеми браузерами. Возможно, вам придется использовать несколько полифонов, если вы хотите поддерживать все браузеры.

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>