Javascript find（）方法赢得'；行不通

我想做一个折叠按钮，当我按两次按钮时，旋转功能就不起作用了

我不确定是.find（）方法不起作用还是rotate函数本身不起作用

以下是JSFIDLE链接：

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>

.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;
}

$(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();
        }
    });
});

jQuery:

    <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>

.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;
}

$(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();
        }
    });
});

---

您正在使用的插件将原始的

标记转换为

。您可以使代码按如下方式工作：

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

---

就个人而言，我会寻找一个更好的插件。

纯CSS旋转，因为您要求更好的替代方案：

CSS:

JS:

---

您可以使用css来实现这一点

---

info不是img的母公司，也不是img的母公司。因此，取info的子级和info类的子级-

$(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();
        }
    });
});

---

您从“旋转”加载项中得到一个错误。未捕获类型错误：无法读取未定义的属性“角度”？有人建议更好的旋转方法吗？您可以添加

transition:transform.2s linear以使动画更平滑。你能解释一下这个答案是如何解决这个问题的吗？info不是img的父母，它的祖父母。所以，取info的子级和info类的子级
$(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();
        }
    });
});