Jquery 单击“手风琴”部分时旋转插入符号

我有一架四小节的手风琴。每个部分上都有一个插入符号。我希望每个插入符号在单击其部分时旋转180度。单击手风琴部分时，它将在其下方显示一个段落。第一段已经显示

HTML

}))

---

插入符号翻转代码是我的jquery中从底部算起的第四行。有几个问题

您没有包含CSS，但我怀疑您没有将

.caret

设置为块类型元素，这是

转换

工作所必需的

jQuery的

closest（）

函数检查元素的父元素，而您正在查找子元素，因此应该使用

find（）

我的方法是添加一个

active

类，或者添加到

caret

——在我下面的示例中，或者添加到头

div

本身（可能更晚）。这样可以很容易地签入代码的其他部分，并避免内联样式弄乱CSS

如果您想继续使用您的方法，但要使用

find（）

，请删除

180deg

周围的引号（正如我在下面注释掉的代码中所做的）

>p>与此问题无关，但<>代码>代码>标签被认为是过时的，所以你可以考虑使用<代码> <强> <代码>。

无论如何，这里有一个经过修改的示例：

jQuery（文档）.ready（函数（）{
//隐藏要启动的所有面板
变量面板=$（'.accordion>p'）.hide（）；
//加载时显示第一个面板（可选）
panels.first（）.show（）；
//单击面板标题
$（'.accordion>a>div'）。单击（函数（）{
var$this=$（this）；
$（'.caret'）.removeClass（“活动”）；
//向上滑动所有其他面板
panels.slideUp（）；
//向下滑动目标面板
$this.parent（）.next（）.slideDown（）；
$this.find（'.caret'）.addClass（“活动”）；
/*//将最近的插入符号翻转180度
$this.find（'.caret'）.css({
“变换”：“旋转（180度）”
});
*/
返回false；
});
});
.caret{
显示：内联块；
}
.插入符号：之后{
内容：“>”；
显示：内联块；
}
.插入符号{
变换：旋转（90度）；
}


生活就是发现。对我来说，这可能是任何事情，从去一个我从未拍过照片的地方旅行，到学习一些帮助我成长为一个人的新东西。

创建高质量的图像是每个摄影师过程中的一个重要部分。我在摄影中强调清晰，因为它能让我捕捉大自然最美好的细节。


现在很难找到真正真实的东西。在我的摄影作品中，我关注自然，因为我相信真实的体验必须通过将自己从日常生活的干扰中解脱出来，重新与自然联系起来来开始。

专注是一种精神状态，通过将自己的意识集中在当下，同时冷静地承认和接受自己的感受、想法和感觉。这是一种常用的治疗技术。

你的问题是什么？你已经清楚地说明了你想要什么，但你没有说明你面临的问题是什么？行//翻转最近的插入符号180度$this.closest（'.caret'）.css（{'transform'：“rotate（'180deg'）”）；似乎不起作用。其他一切都正常工作。
<div class="accordion">
                <a href=""><div class="wow fadeInRight">Discovery <b class="caret"></b></div></a>
                <p class="wow fadeInRight">
                    Life is all about discovery. For me, this could be anything from traveling to a place
                    that I've never photographed, to learning something new about myself that helps me grow as a person.
                </p>
                <a href=""><div class="wow fadeInRight">Clarity <b class="caret"></b></div></a>
                <p>Creating high quality images is an important part of every photographer's process.
                    I emphasize clarity in my photography because it allows me to capture nature's finest details.
                </p>
                <a href=""><div class="wow fadeInRight">Authenticity <b class="caret"></b></div></a>
                <p>
                    These days it can be hard to find anything that is truly authentic. I focus on nature in my photography because I believe that authentic experiences
                    must be initiated by removing yourself from the distractions of everyday life and reconnecting with nature.
                </p>
                <a href=""><div class="wow fadeInRight">Mindfullness <b class="caret"></b></div></a>
                <p>Mindfullness is a mental state achieved by focusing one's awareness on the present moment, while calmly acknowledging and accepting one's feelings, thoughts, and sensations. This is commonly used as a therapeutic technique.
                 </p>
            </div><!--end accordion-->

jQuery(document).ready(function() {
//Hide all panels to start
var panels = $('.accordion > p').hide();

//Show first panel on load (optional)
panels.first().show();

//On click of panel title
$('.accordion > a > div').click(function() {
    var $this = $(this);

    //slide up all other panels
    panels.slideUp();

    //slide down target panel
    $this.parent().next().slideDown();

    //flip closest caret 180 degrees
    $this.closest('.caret').css({'transform' : "rotate('180deg')"});

    return false;
});