1
私は、ブートストラップコラプスを使用して、拡大縮小コンテンツを作成している状況があります。クリック時のトグル
私は、下向き矢印の背景イメージを持つ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"> </button>私-BTN後にオープンクラスを追加することで、矢印が変更された...しかし、どのように私は、CSS/JSを使用して、これをacheiveことができますか？
UPDATE
私は
<script>
$(document).ready(function(){
$('.my-btn').on('click', function(){
$(this).toggleClass('open');
});
});
</script>
を試みたがトグルに、ブートストラップが崩壊したクラスを追加しますが、私のコードは無視されます。
使用jqueryのは、.toggleClass（） –