別の状態を設定するための追加/削除クラスを使用したJqueryのクリックと回転

Question

ユーザーがシェブロン（SVGアイコン）をクリックしたときにコンテンツを展開/折りたたんで、アイコンを90度回転させるプロジェクトで作業しています展開時には下に、折りたたむときには右に90度戻って画像を回転させます。展開機能は正しく機能しますが、折りたたみに問題があります。クラスを追加/削除して、「展開」と「折りたたみ」の状態を作成します。新しいクラスが正しく追加されますが、新しいクラスをターゲットにして崩壊すると、何もしません。私はかなりjQuery/JSの新機能ですので、私のコードはあまりダイナミックではありませんが、ここで助けを得ることを望みます。あらかじめありがとうございます！

<div class="result"> 

<div class="result-header"> 
    <svg id="expand-result-1" class="svg-icon-24 svg-chevron-expand expand-result-1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:none;}.cls-2{fill:#2a2d30;}</style></defs><title>24</title><g id="empty_icon_margins"><rect class="cls-1 svg-chevron" width="24" height="24"/></g><g id="next"><polygon class="cls-2 svg-chevron" points="11.4 4.7 9.81 6.3 15.01 11.5 9.81 16.7 11.4 18.3 16.6 13.09 18.19 11.5 16.6 9.91 11.4 4.7"/></g></svg> 
    <svg class="svg-icon-24 svg-bcite-distinguished svg-bcite" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><style>.cls-1{fill:none;}.cls-2{fill:#2a2d30;}</style></defs><title>24</title><g id="empty_icon_margins"><rect class="cls-1" width="24" height="24"/></g><g id="bcite_distinguish"><path class="cls-2" d="M18,4H6A2,2,0,0,0,4,6V18a2,2,0,0,0,2,2H18a2,2,0,0,0,2-2V6A2,2,0,0,0,18,4ZM7.93,17.83,6.17,16.07l9.9-9.9,1.77,1.77Z"/></g></svg> 
    <a class="result-title" href="" alt="Result Title" title="Result Title">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu magna in nisl fermentum tempor.</a> 
</div> 

<div class="clear"></div> 

<div class="result-content result-content-1" id="result-content-1"> 
    <p>Cras dapibus quis nulla id porttitor. <span class="principle-highlight">Nullam porttitor mollis dui eu egestas. Sed vestibulum risus quam, eget porta dolor iaculis ac. Sed porttitor gravida augue quis pretium. Pellentesque vitae lobortis nunc.</span> Nam nulla erat, viverra vitae nisl eget, facilisis dictum velit. Nam finibus massa eu dui porttitor faucibus. Nullam ullamcorper, libero nec pellentesque fringilla, tellus ex tempus felis, at tincidunt arcu nisi molestie enim.</p> 
</div> 

<div class="clear"></div> 
</div> 

<script type="text/javascript"> 

$(document).ready(function() { 
$(".result-content").hide(); 
}); 

$(".expand-result-1").click(function() { 
$("#result-content-1").slideDown("slow"); 
$(this).rotate({ 
    angle: 0, 
    animateTo:90 
}); 
$('#expand-result-1').addClass('collapse-result-1'); 
$('#expand-result-1').removeClass('expand-result-1'); 
console.log("collapse added"); 
}); 

$(".collapse-result-1").click(function() { 
console.log("collapse clicked"); 
$("#result-content-1").slideUp("slow"); 
$(this).rotate({ 
    angle: 90, 
    animateTo:0 
}); 
$('#expand-result-1').removeClass('collapse-result-1'); 
$('#expand-result-1').addClass('expand-result-1'); 
}); 

</script> 

この背後にある私の考え方です... slideDownおよびビルド前の回転機能（http://jqueryrotate.com/）を使用して、正常に動作するクラス.expand-result-1を、標的とすることにより、クリック機能を開始します。回転アニメーションも正しく動作し、クラスexpand-result-1が正しく削除され、クラスcollapse-result-1が正しく追加されます。

今、collapse-result-1をターゲットにすると、何も起こりません。最初の回転アニメーションは正常に機能し、expand-result-1セレクタクラスが削除/置換されていても、最初のクリック機能を実行していると思います。

この度も、お手数おかけいたしますが、お手数ですがお寄せいただきありがとうございます。私が言ったように、私はこれには新しいし、解決策を見出すためにかなりの調査をしましたが、私の正確なシナリオに合うようなものは何もありません。

Answer 1

（あなたがとにかくjQueryのを使用している場合）ここに1つの場所ですべてを保持ソリューションです - 上記Zeturaの答えの一部を取って、表示/非表示の状態でそれを組み合わせます。

$(document).ready(function() { 
    $('.result-content').hide(); 
}); 

$('.chevron').click(function() { 
    if ($(this).is(".result-collapsed")){ 
     $(this).parent().siblings('.result-content').slideDown("slow"); 
     $(this).rotate(90); 
     $(this).removeClass('result-collapsed'); 
    } 
    else{ 
     $(this).parent().siblings('.result-content').slideUp("slow"); 
     $(this).rotate(0); 
     $(this).addClass('result-collapsed'); 
    } 

}); 

jQuery.fn.rotate = function(degrees) { 
    $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)', 
     '-moz-transform' : 'rotate('+ degrees +'deg)', 
     '-ms-transform' : 'rotate('+ degrees +'deg)', 
     'transform' : 'rotate('+ degrees +'deg)', 
     '-webkit-transition' : '.3s ease-out', 
     '-moz-transition' : '.3s ease-out', 
     '-o-transition' : '.3s ease-out'}); 

    return $(this); 
}; 

編集：あなただけのCSSクラスを追加し、CSSアニメーションで回転させることができクリックポイント

<div class="chevron-container result-collapsed"></div> 

Answer 2

JavaScriptを使用せずに行う方法は次のとおりです。しかし、JavaScriptをjQueryのslideDown関数を使って "result-content"を表示/非表示にすることができます。

https://jsfiddle.net/Zetura/20qgmenh/

.expander { 
    display: none; 
} 

// Rotate SVG chevron 
.expander + label svg { 
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */ 
    transform: rotate(90deg); 
    transition: transform 0.3s ease-in-out; 
} 

.expander:checked + label svg { 
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */ 
    transform: rotate(-90deg); 
} 

// Show/Hide the content with slide down 
.expander + label + .result-content { 
    max-height: 0; 
    transition: max-height 0.3s ease-in-out; 
    overflow: hidden; 
} 

.expander:checked + label + .result-content { 
    max-height: 600px; 
}