jQuery，切换CSS内容（箭头向上和向下）

Question

我使用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();
      });
   });

- yossi

---

如果你想切换内容，使用CSS伪类来添加内容似乎是最糟糕的想法之一。 - adeneo

@adeneo 为什么？！我想切换:AFTER的内容。 - yossi

Answer 1

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");
  });

- Kristoffer Jälén

---

切换类名为“down”，确定吗？ - Paulie_D

顺便说一下，看起来你想要切换的是_link_的类，而不是UL。我的答案基于这个假设。 - Kristoffer Jälén

Answer 2

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可以在空格分隔的类之间进行切换。

- MIdhun Krishna

Answer 3

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

- Manuel Arwed Schmidt

---

你不能使用JS/JQ选择伪元素，因为它们不在DOM中。 - Paulie_D

啊，是的。我太蠢了。删掉了伪代码。 - Manuel Arwed Schmidt

你修改后的答案也不可行，因为content不是锚点的属性。 - Paulie_D

这可以做到，但我需要在伪类中实现它... 它必须在内容之后。 - yossi

你需要切换一个类（就像在其他地方给出的答案一样）。 - Paulie_D

是的，如果你需要伪代码什么的，最好还是这样做。 - Manuel Arwed Schmidt