jquery .find（）方法不起作用

Question

好吧，我正在嘗試制作一種折疊按鈕，事情就是當我按下按鈕兩次時，旋轉功能將不再起作用。

我不確定它是不起作用的.find（）方法還是旋轉函數本身。

這是jsfiddle鏈接：

http://jsfiddle.net/XgX5m/2/

HTML：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://jquery-rotate.googlecode.com/files/jquery.rotate.1-1.js"></script>
<div class="info">
            <div>
                <div class="title">
                    <div><img src="http://i.imgur.com/phLHqY3.png"/></div>
                    <div>Lorem Ipsum</div>
                </div>
                <div class="infot">
                    Teckentrup - seit über 80 Jahren am Markt - ist bis heute der einzige unter den führenden Anbietern von Türen und Toren, der vom Brandschutz kommt. Wir haben nicht nur die gesamte Entwicklung in diesem Bereich mitgeprägt und begleitet. Die hohen Sicherheitsanforderungen standen auch Pate, als wir umfangreiche Kompetenzen in weiteren Feldern der Funktionstüren aufgebaut haben.
                </div>
            </div>
            <div>
                <div class="title">
                    <div><img src="http://i.imgur.com/phLHqY3.png"/></div>
                    <div>Lorem Ipsum</div>
                </div>
                <div class="infot">
                    Teckentrup - seit über 80 Jahren am Markt - ist bis heute der einzige unter den führenden Anbietern von Türen und Toren, der vom Brandschutz kommt. Wir haben nicht nur die gesamte Entwicklung in diesem Bereich mitgeprägt und begleitet. Die hohen Sicherheitsanforderungen standen auch Pate, als wir umfangreiche Kompetenzen in weiteren Feldern der Funktionstüren aufgebaut haben.
                </div>
            </div>
        </div>

CSS：

.info {
    margin:15px 30px;
    background:#fff;
    border-radius:2px;
    padding:20px;
}

.info .title {
    display:flex;
    font-size:22px;
    padding:5px 0;
    border-bottom:dashed 1px #C0C0C0;
}

.info .title:hover {
    cursor:pointer !important;
}
.info .title img {
    vertical-align:middle;
}

.info .infot {
    color:#9C9C9C;
    font-size:14px;
    padding:10px 0;
}

jQuery的：

$(document).ready(function() {
    $('.info .infot').hide();
    $('.info .title').click(function() {
        if ($(this).siblings('.infot').is(':visible')) {
            $(this).siblings('.infot').slideUp('fast');
            $(this).find('img').rotateLeft();
        } else {
            $(this).siblings('.infot').slideDown('fast');
            $(this).find('img').rotateRight();
        }
    });
});

Answer 1

您正在使用的插件將原始<img>標記轉換為<canvas> 。 您可以使您的代碼像這樣工作：

        $(this).find('img, canvas').rotateLeft();

我個人會尋找一個更好的插件。

Answer 2

純CSS旋轉，因為你要求更好的選擇：

CSS：

img.rotateRight {
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

JS：

$(document).ready(function() {
    $('.info .infot').hide();
    $('.info .title').click(function() {
        var img = $(this).find('img');
        if ($(this).siblings('.infot').is(':visible')) {
            $(this).siblings('.infot').slideUp('fast');
        } else {
            $(this).siblings('.infot').slideDown('fast');
        }
        img.toggleClass('rotateRight');
    });
});

DEMO

Answer 3

Please use below code on fiddle

When you are open accordion then image turn into canvas so at time of close accordion you can get image that already turn in canvas

=============================
$(document).ready(function() {
    $('.info .infot').hide();
    $('.info .title').click(function() {
        if ($(this).siblings('.infot').is(':visible')) {
            $(this).siblings('.infot').slideUp('fast');
            $(this).find('canvas').rotateLeft();
        } else {
            $(this).siblings('.infot').slideDown('fast');
            $(this).find('img,canvas').rotateRight();
        }
    });
});
===================================================

Answer 4

info不是img的父母的父母。 所以，帶信息類孩子的信息和孩子的孩子 -

$(document).ready(function() {
    $('.info .infot').hide();
    $('.info .title').click(function() {
        alert($(this).siblings('.infot').is(':visible'))
        if ($(this).siblings('.infot').is(':visible')) {
            $(this).siblings('.infot').slideUp('fast');
            $(this).children().children('canvas').css('transform', 'rotate(-90deg)');
        } else {
            $(this).siblings('.infot').slideDown('fast');
            $(this).children().children('img').rotateRight();
        }
    });
});

Answer 5

你可以使用css，工作DEMO

 $(document).ready(function() {
        $('.info .infot').hide();
        $('body').on('click','.info .title',function() {
            if ($(this).siblings('.infot').is(':visible')) {
                $(this).siblings('.infot').slideUp('fast');
                $(this).find('img').css('transform','rotate(0deg)');
            } else {
                $(this).siblings('.infot').slideDown('fast');
                $(this).find('img').css('transform','rotate(90deg)');
            }
        });
    });