Question

好吧，我正试图制作一种折叠按钮，事情就是当我按下按钮两次时，旋转功能将不再起作用。

我不确定它是不起作用的.find（）方法还是旋转函数本身。

这是jsfiddle链接：

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)');
            }
        });
    });

jquery .find（）方法不起作用

5 个答案: