Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Dennis Eitner
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Dennis Eitner
Full Stack JavaScript Techdegree Graduate 25,644 Points
Posted by Dennis Eitner
.a{fill-rule:evenodd;}techdegree seal-36
Dennis Eitner
Full Stack JavaScript Techdegree Graduate 25,644 Points

Hide ::after element of anchor/link if next element is an ul-element

I want to hide an ::after element of a link, if the next element is an ul element. I can't get the right travels method.

here is what i got:

structure: ... <li> <a class="someClass" href="">Some link</a> <ul.dropdown-menu> ... </li>

if ($('.someClass').find('ul.dropdown-menu')){ console.log('true'); } else { console.log('false'); }

1 Answer

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Dennis,

Pseudo elements aren't part of the dom so you can't select them with jQuery and then manipulate them with jQuery methods.

One way to get around this is to add another class to the links that have drop downs. Then you can target this extra class to hide the ::after pseudo element using display: none or however you want to hide it.

I'll assume you have something like this:

.someClass::after {
    /* styles for after pseudo element */
}

You can add the following to your css:

.someClass.has-dropdown::after {
    display: none;
}

This way, you can use jQuery to add the "has-dropdown" to those links which are followed by a dropdown menu and then the ::after element for those links will be hidden.

I would recommend that you select all the dropdowns, then get the previous sibling (which will be the links) and then add the class to those links.

$('.dropdown-menu').prev().addClass("has-dropdown");

Let me know if I've misunderstood what you're trying to do.