javascript - JqueryJS - how to Toggle the :after, :befor of an element? - Stack Overflow

admin管理员组

文章数量:1405195

i have the following question, how i can toggle the display of :befor and :after of an element?

Here is the jsfiddle -> /

in the css you can see the

acc-btn:after, acc-btn:befor{display:[toggle this]} on line 19

i have the following question, how i can toggle the display of :befor and :after of an element?

Here is the jsfiddle -> http://jsfiddle/swb6dxhy/

in the css you can see the

acc-btn:after, acc-btn:befor{display:[toggle this]} on line 19

• javascript
• jquery
• html
• css

Share Follow edited Sep 24, 2014 at 21:50 Ram 145k1616 gold badges172172 silver badges200200 bronze badges asked Sep 24, 2014 at 21:30 Tim4497Tim4497 38033 silver badges2121 bronze badges 2

• What do you mean by toggle? If you put it in the css, it'll be there for good. Unless you override with javascript or a new class. – Bobo Commented Sep 24, 2014 at 21:36
• 1 You can't do this, because, technically, the content of the pseudo classes :after and :before aren't part of the DOM. Of course, you can add and remove classes which have :after and :before in their CSS. – Jeremy Commented Sep 24, 2014 at 21:40

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You can set them always as display:none, and use a condition on the #acc-btn element, for example a class, to subject the visibility of the pseudo to having this class...

#acc-btn.show:after, #acc-btn.show:before {
    display: block;
}

Then, you can easily toggle this class on the main element:

$("#acc-btn").toggleClass("show");

Updated Fiddle

本文标签： javascriptJqueryJShow to Toggle the afterbefor of an elementStack Overflow