javascript - jQuery 在 Accordion 上旋转箭头图像

标签 javascript jquery html css

所以我有这个页面http://travisjterry.com/FAQ/FAQ.html

抱歉,我试图让它在 jsfiddle 中工作,但我无法让它在那里工作。

这是一个 Accordion 风格的常见问题解答页面。当我点击问题时,我试图让箭头旋转 90 度。它只切换最上面的一个,我知道这是因为我为图像使用了一个 ID,但是使用一个类切换了所有这些。

$(document).ready(function($) {
       $('#accordion div').hide();
       $('#accordion p span').click(function(){
               $("#blueArrow").rotate(90);
               $('#accordion div').slideUp();
               $(this).parent().next().slideDown();
               return false;
       });
});

我在这里错过了什么?

最佳答案

尝试将它们更改为类并尝试类似的操作:

$(document).ready(function($) {
    $('#accordion div').hide();
    $('#accordion p span').click(function(){
        $(this).closest('p').siblings().find('.blueArrow').rotate(0);
        $(this).find('.blueArrow').rotate(90);
        $('#accordion div').slideUp();
        $(this).parent().next().slideDown();
        return false;
    });
});

这将仅针对每个跨度内的“.blueArrow”,而不是所有跨度。

关于javascript - jQuery 在 Accordion 上旋转箭头图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19013082/

相关文章:

javascript - 在 React Components 中挂载转换 DOM 的外部脚本?

javascript - 使用javascript,如何转换为JSON、类似Java-POJO的类?

php - 不使用 ajax 将对象数组作为 POST 数据发送

javascript - jQuery 淡入淡出动画不做我想做的事

jquery - 插件选项卡从第一个选项卡转发到第二个

javascript - 如何阻止用户选择开始时间之前的结束时间

javascript - 使用 AWS Lambda 方法循环访问列表并调用多个其他 lambda 方法

php - 谁能帮我把它做成一个对象。 (php)

html - css 不适用于 bootstrap less

html - 单独时,CSS 不显示类名