I have a challenge with the following code and I am looking to make it function like a dropdown one by one
For example:
ABCD
ABCD
1234
ABCD
1234
abcd
<ul class="first">
<li class="first-a"><a href="https://someurl">ABCD</a>
<ul class="second">
<li class="second-a"><a href="https://someurl">1234</a>
<ul class="third">
<li class="third-a"><a href="https://someurl">abcd</a></li>
</ul>
</li>
</ul>
</li>
</ul>I have implemented CSS along these lines:
.first li {
display:inline-block;
position: relative;
}
.second {
display:none;
position: absolute;
}
.second.open {
display: block;
}
and added this JavaScript:
$( ".first-a" ).click(function() {
$(".second").removeClass( "open" );
$(".second", this).toggleClass( "open" );
});
$(window).click(function() {
$(".second" ).removeClass( "open" );
});
$(".first-a").click(function(event){
event.stopPropagation();
});
However, so far none of these methods have been successful in achieving the desired functionality