Jquery 单击时更改手风琴箭头方向

我有带箭头的手风琴。我们的目标是在手风琴滑落时改变div类。我唯一的结果是——将所有div类从arrow-down更改为arrow-up。如何仅更改活动

您只需使用，即可从手风琴向下更改为手风琴向上：

$(this).find('.accordion-arrow').toggleClass('accordion-down accordion-up');

您需要将上一行添加到以下内容的末尾：

$'.accordio项'.单击函数{

事件处理程序

$'.手风琴项目'.单击功能E{ e、 防止违约； var$this=$this； 变量$arrow=$'。手风琴箭头'； 如果$this.next.hasClass'show'{ $this.next.removeClass'show'； $this.next.slideUp350； }否则{ $this.parent.parent.find'li.inner'。removeClass'show'； $this.parent.parent.find'li.inner'。幻灯片350； $this.next.toggleClass'show'； $this.next.slideToggle350； } // //添加下一行 // $this.find'.accordio arrow'.toggleClass'accordion-down-accordion-up'； }; 李{ 显示：块； } .手风琴{ 宽度：957px； 保证金：0自动； } .手风琴.手风琴项目{ 背景：Ebeee； 显示：块； 高度：75px； 字体大小：24px； 文本对齐：左对齐； 左侧填充：72px； -网络工具包盒阴影：0px 5px 0px C0C0； -莫兹盒阴影：0px 5px 0px C0C0； 盒影：0px 5px 0px C0C0； 保证金底部：1.5px； 显示器：flex； 显示：-webkit flex； 对齐项目：居中； -webkit对齐项目：居中； } .手风琴{ 显示：无； 背景：f1f6f6； 左侧填充：72px； 文本对齐：左对齐； 填充顶部：17px； 填充底部：17px； -网络工具包盒阴影：0px 5px 0px C0C0； -莫兹盒阴影：0px 5px 0px C0C0； 盒影：0px 5px 0px C0C0； 保证金底部：1.5px； } .手风琴.手风琴箭头{ 宽度：0； 身高：0； 左边框：11px实心透明； 右边框：11px实心透明； 左边距：600px； 边缘顶部：6px； } .手风琴.放下手风琴{ 边框顶部：11px实心74cde8； } .手风琴{ 边框底部：11px实心74cde8； }

一些文本1

一些文本2

一些文本3

一些文本4

$'.手风琴项目'.单击功能E{ e、 防止违约； var$this=$this； 变量$arrow=$'。手风琴箭头'； //单击即可翻转^v $this.find$arrow.css{ “变换”：“旋转180度” }; 如果$this.next.hasClass'show'{ $this.next.removeClass'show'； $this.next.slideUp350； //将箭头返回到未折叠状态 $this.find$arrow.css{ “转换”： }; }否则{ $this.parent.parent.find'li.inner'。removeClass'show'； $this.parent.parent.find'li.inner'。幻灯片350； $this.next.toggleClass'show'； $this.next.slideToggle350； } }; 李{ 显示：块； } .手风琴{ 宽度：957px； 保证金：0自动； .手风琴项目{ 背景：Ebeee； 显示：块； 高度：75px； 字体大小：24px； 文本对齐：左对齐； 左侧填充：72px； -webkit盒阴影：0px 5px 5px 0px rgba192、192、192、1； -moz盒阴影：0px 5px 5px 0px rgba192、192、192、1； 盒影：0px 5px 5px 0px rgba192，192，192，1； 保证金底部：1.5px； 显示器：flex； 显示：-webkit flex； 对齐项目：居中； -webkit对齐项目：居中； } .内部{ 显示：无； 背景：f1f6f6； 左侧填充：72px； 文本对齐：左对齐； 填充顶部：17px； 填充底部：17px； -webkit盒阴影：0px 5px 5px 0px rgba192、192、192、1； -moz盒阴影：0px 5px 5px 0px rgba192、192、192、1； 盒影：0px 5px 5px 0px rgba192，192，192，1； 保证金底部：1.5px； } .手风琴箭{ 宽度：0； 身高：0； 左边框：11px实心透明； 右边框：11px实心透明； 左边距：600px； 边缘顶部：6px； } .放下手风琴{ 边框顶部：11px实心74cde8； } .拉手风琴{ 边框底部：11px实心74cde8； } }

一些文本1

一些文本2

一些文本3

一些文本4

---

首先，您可以删除类up arrow并添加down arrow类，这样它将只显示当前手风琴的up arrow，然后使用toggleClass方法切换up&down arrow类

$'.手风琴项目'.单击功能E{ e、 防止违约； var$this=$this； 变量$arrow=$'。手风琴箭头'； var$current=$this.find.accordion-arrow； $arrow.not$current.removeClassaccordion-up.addclassacordion-down； $ current.toggleClassaccordion-up-accordion-down； 如果$this.next.hasClass'show'{ $this.next.removeClass'show'； $this.next.slideUp350； }否则{ $this.parent.parent.find'li.inner'。removeClass'show'； $this.parent.parent.find'li.inner'。幻灯片350； $this.next.toggleClass'show'； $this.next.slideToggle350； } }; 李{ 显示：块； } .手风琴{ 宽度：957px； 保证金：0自动； } .手风琴.手风琴项目{ 背景：Ebeee； 显示：块； 高度：75px； 字体大小：24px； 文本对齐：左对齐； 左侧填充：72px； 盒影：0px 5px 0px C0C0； 保证金底部：1.5px； 显示：-网络工具包盒； 显示：-ms flexbox； 显示器：flex； 显示：-webkit flex； -webkit框对齐：居中； -ms-flex-align：居中； 对齐项目：居中； -webkit对齐项目：居中； } .手风琴{ 显示：无； 背景：f1f6f6； 左侧填充：72px； 文本对齐：左对齐； 填充顶部：17px； 填充底部：17px； 盒影：0px 5px 0px C0C0； 保证金底部：1.5px； } .手风琴.手风琴箭头{ 宽度：0； 身高：0； 左边框：11px实心透明； 右边框：11px实心透明； 左边距：600px； 边缘顶部：6px； } .手风琴.放下手风琴{ 边框顶部：11px实心74cde8； } .手风琴{ 边框底部：11px实心74cde8； }

一些文本1

一些文本2

一些文本3

一些文本4

---

谢谢非常好。但唯一的问题是-在你们点击活动标签关闭它之后，箭头不会转过来。

$(this).find('.accordion-arrow').toggleClass('accordion-down accordion-up');