jquery，切换 css 内容（向上和向下箭头）答案

【问题标题】：jquery, toggle css content (arrow up and down)jquery，切换 css 内容（向上和向下箭头）
【发布时间】：2014-08-12 20:40:09
【问题描述】：

我使用 jquery 来切换元素。我使用的按钮是 CSS 样式的。
我想根据切换元素的状态 ($(#categories ul)) 将内容从 \25BC（向下箭头）更改为 \25B2（向上箭头）。
应该怎么做？

代码：

   a#categories-toggle:after{
      content: "\25BC";
   }

   $().ready(function(){
      $("#categories-toggle").on('click', function(eve){
         eve.preventDefault(); 
         $("#categories ul").toggle();
      });
   });

【问题讨论】：

如果你想切换内容，使用 CSS 伪类来添加内容似乎是有史以来最糟糕的想法之一。
@adeneo 为什么？！我想切换 :AFTER 的内容

标签： javascript jquery html css pseudo-class

【解决方案1】：

你试过 $('a#categories-toggle').css('content', '\25B2'); ?

【讨论】：

您不能使用 JS/JQ 选择伪元素，因为它们不在 DOM 中
啊，是的。愚蠢的我。删除了伪内容。
您编辑的答案也不起作用，因为 content 不是锚的属性
这可以做到（？），但我在伪类中需要它..它必须在内容之后
@yossi 你必须切换一个类（如在其他地方给出的答案）。

【解决方案2】：

CSS：

a#categories-toggle.down:after{
  content: "\25BC";
}
a#categories-toggle:after{
  content: "\25B2";
}

HTML：

<a id="categories-toggle" href="#">foo</a>

jQuery:

$("#categories-toggle").on('click', function(eve){
     eve.preventDefault(); 
     $(this).toggleClass("down");
  });

【讨论】：

确定要“关闭”课程吗？
顺便说一下，看起来它是您要切换的 link 的类，而不是 UL。我的回答是基于这个假设。

【解决方案3】：

a#categories-toggle.up:after{
      content: "\25BC";
   }
a#categories-toggle.down:after{
      content: "\25B2";
   }

 $().ready(function(){
      $("#categories-toggle").on('click', function(eve){
         eve.preventDefault(); 
         $("#categories ul").toggleClass(up down);
      });
   });

ToggleClass 可以在空格分隔的类之间切换。

【讨论】：