Javascript 如何创建仅在单击时向下旋转的图标

我制作了一个带有图标的滑动切换菜单，当用户点击图标时，它会向下旋转，但当我点击其中一个图标时，所有图标都会旋转。如何仅旋转单击的图标，而不是全部

$（文档）.ready（函数（）{
//切换向下滑动导航
$（'.nav侧边栏ul:has（li）'）.addClass（'子菜单'）；
$（'.dropmenu'）。在（'click'，function（）上{
$（this）.next（'.sub-menu'）.slideToggle（200）；
$（this）.parent（）.sides（）.children（）.next（）.slideUp（）；
返回false；
});
//箭头旋转
$（'.dropmenu'）。在（'click'，function（）上{
//$（'.dropmenu'）.removeClass（'openmenu'）；
//$（this.addClass（'openmenu'）；
if（$（'.dropmenu'）.hasClass（'openmenu'））{
$（'.dropmenu'）.removeClass（'openmenu'）；
}否则{
$（'.dropmenu'）.addClass（'openmenu'）；
}
});
});
.nav侧栏{
列表样式：无；
填充：0；
保证金：0；
}
.nav侧栏>li>a，
.子菜单>li>a{
显示：块；
颜色：#838F9A；
文本转换：大写；
填充：0 30px；
线高：3.5em；
}
.子菜单>li>a{
线高：2.5em；
}
.nav侧栏>li>a:悬停，
.nav侧边栏>li>a：焦点，
.子菜单>li>a:悬停，
.子菜单>li>a:焦点{
颜色：#4FC1E9；
}
.下拉菜单：在{
字体系列：“FontAwesome”；
字体大小：16px；
内容：“\f105”；
垂直对齐：中间对齐；
浮动：对；
右边距：-10px；
过渡：全部。3秒轻松；
}
.openmenu:之后{
-ms变换：旋转（90度）；
-webkit变换：旋转（90度）；
变换：旋转（90度）；
}
.子菜单{
显示：无；
列表样式：无；
填充：10px 30px；
保证金：0；
背景色：#1D232B；
位置：相对位置；
}
.打开菜单>.子菜单{
显示：无；
}






















您的选择器
$（'.dropmenu'）
位于
.on（'click'
函数使用类
dropmenu
选择页面上的任何元素。您需要确保它只选择正在单击的元素。幸运的是，您可以通过
此
引用已单击的元素

以下代码应该可以工作：

$(document).ready(function() {
  // toggle slide down nav
  $('.nav-sidebar ul:has(li)').addClass('sub-menu');

  $('.dropmenu').on('click', function() {
    $(this).next('.sub-menu').slideToggle(200);
    $(this).parent().siblings().children().next().slideUp();
    return false;
  });
  // arrow rotate
  $('.dropmenu').on('click', function() {
    if ($(this).hasClass('openmenu')) {
      $(this).removeClass('openmenu');
    } else {
      $(this).addClass('openmenu');
    }
  });
});

在
中选择了
（“.dropmenu”）
。在（'单击“
功能”中，使用class
dropmenu
）选择页面上的任何元素。您需要确保它只选择正在单击的元素。幸运的是，您可以通过
this
引用已单击的元素

以下代码应该可以工作：

$(document).ready(function() {
  // toggle slide down nav
  $('.nav-sidebar ul:has(li)').addClass('sub-menu');

  $('.dropmenu').on('click', function() {
    $(this).next('.sub-menu').slideToggle(200);
    $(this).parent().siblings().children().next().slideUp();
    return false;
  });
  // arrow rotate
  $('.dropmenu').on('click', function() {
    if ($(this).hasClass('openmenu')) {
      $(this).removeClass('openmenu');
    } else {
      $(this).addClass('openmenu');
    }
  });
});

只需使用“this”将click处理程序更改为引用单击的元素

 $('.dropmenu').on('click', function() {
    if ($(this).hasClass('openmenu')) {
      $(this).removeClass('openmenu');
    } else {
      $(this).addClass('openmenu');
    }
  });
});

只需使用“this”将click处理程序更改为引用单击的元素

 $('.dropmenu').on('click', function() {
    if ($(this).hasClass('openmenu')) {
      $(this).removeClass('openmenu');
    } else {
      $(this).addClass('openmenu');
    }
  });
});


$（文档）.ready（函数（）{
//切换向下滑动导航
$（'.nav侧边栏ul:has（li）'）.addClass（'子菜单'）；
$（'.dropmenu'）。在（'click'，function（）上{
$（this）.toggleClass（'openmenu'）；//箭头旋转
$（this）.next（'.sub-menu'）.slideToggle（200）；
$（this）.parent（）.sides（）.children（）.removeClass（'openmens'）.next（）.slideUp（）；
返回false；
});
})；
.nav侧栏{
列表样式：无；
填充：0；
保证金：0；
}
.nav侧栏>li>a，
.子菜单>li>a{
显示：块；
颜色：#838F9A；
文本转换：大写；
填充：0 30px；
线高：3.5em；
}
.子菜单>li>a{
线高：2.5em；
}
.nav侧栏>li>a:悬停，
.nav侧边栏>li>a：焦点，
.子菜单>li>a:悬停，
.子菜单>li>a:焦点{
颜色：#4FC1E9；
}
.下拉菜单：在{
字体系列：“FontAwesome”；
字体大小：16px；
内容：“\f105”；
垂直对齐：中间对齐；
浮动：对；
右边距：-10px；
过渡：全部。3秒轻松；
}
.openmenu:之后{
-ms变换：旋转（90度）；
-webkit变换：旋转（90度）；
变换：旋转（90度）；
}
.子菜单{
显示：无；
列表样式：无；
填充：10px 30px；
保证金：0；
背景色：#1D232B；
位置：相对位置；
}
.打开菜单>.子菜单{
显示：无；
}























$（文档）.ready（函数（）{
//切换向下滑动导航
$（'.nav侧边栏ul:has（li）'）.addClass（'子菜单'）；
$（'.dropmenu'）。在（'click'，function（）上{
$（this）.toggleClass（'openmenu'）；//箭头旋转
$（this）.next（'.sub-menu'）.slideToggle（200）；
$（this）.parent（）.sides（）.children（）.removeClass（'openmens'）.next（）.slideUp（）；
返回false；
});
})；
.nav侧栏{
列表样式：无；
填充：0；
保证金：0；
}
.nav侧栏>li>a，
.子菜单>li>a{
显示：块；
颜色：#838F9A；
文本转换：大写；
填充：0 30px；
线高：3.5em；
}
.子菜单>li>a{
线高：2.5em；
}
.nav侧栏>li>a:悬停，
.nav侧边栏>li>a：焦点，
.子菜单>li>a:悬停，
.子菜单>li>a:焦点{
颜色：#4FC1E9；
}
.下拉菜单：在{
字体系列：“FontAwesome”；
字体大小：16px；
内容：“\f105”；
垂直对齐：中间对齐；
浮动：对；
右边距：-10px；
过渡：全部。3秒轻松；
}
.openmenu:之后{
-ms变换：旋转（90度）；
-webkit变换：旋转（90度）；
变换：旋转（90度）；
}
.子菜单{
显示：无；
列表样式：无；
填充：10px 30px；
保证金：0；
背景色：#1D232B；
位置：相对位置；
}
.打开菜单>.子菜单{
显示：无；
}