Javascript 在同一级别div上创建toggleClass？

我试图在单击类名为“toggle box”的同一级别div时，在名为“open arrow”的现有div类上切换一个类“closed arrow”

目前，我有这个工作-但它将切换到所有div与类名为“开放箭头”。我只希望它在被单击的div上工作

查看小提琴示例：

下面是切换类“closed arrow”的当前代码，如何修改代码更改单击的区域

$( 'div' ).next( '.open-arrow' ).toggleClass('closed-arrow');

试试看

而不是

$('div').next( '.open-arrow' ).toggleClass('closed-arrow');

您可以使用

$（this）

获取对当前单击的

的引用。togglelink

锚定，以及使用仅针对同级

。打开单击锚定的箭头

div，以便执行以下操作：

$(this).siblings( '.open-arrow' ).toggleClass('closed-arrow');

而不是：

$('div').next( '.open-arrow' ).toggleClass('closed-arrow');

更新小提琴：

---

根据您的评论，您可以使用：

var closedArrow = $(this).siblings( '.closed-arrow' );
$('.closed-arrow').not(closedArrow).removeClass( 'closed-arrow' )
$(this).siblings( '.open-arrow' ).toggleClass('closed-arrow');

---

更新的Fiddle:

注意ID在文档上下文中必须是唯一的，JSFIDLE中的HTML标记无效Hanks Felix。我做到了，而且成功了。但我注意到，当我点击一个面板，然后点击另一个面板时，箭头状态会使箭头随时准备关闭（即使它已关闭）。知道为什么吗？“我需要重新设置吗？”DanLee很高兴这有帮助。请检查我的更新代码以解决您的问题。同样，这也可以解决Felix的问题！我从何处开始寻找添加代码，以便在单击时将面板中心垂直滚动到窗口？

var closedArrow = $(this).siblings( '.closed-arrow' );
$('.closed-arrow').not(closedArrow).removeClass( 'closed-arrow' )
$(this).siblings( '.open-arrow' ).toggleClass('closed-arrow');