jquery,切换css内容(向上和向下箭头)

时间:2014-06-22 20:01:59

标签: javascript jquery html css pseudo-class

我使用jquery来切换元素。我使用的按钮用css设置 我想根据切换元素(\25BC)的状态,将内容从\25B2(向下箭头)更改为$(#categories ul)(向上箭头)。
应该怎么做?

代码:

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

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

3 个答案:

答案 0 :(得分:7)

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

答案 1 :(得分:0)

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

答案 2 :(得分:0)

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