Dexter Lastar Dexter Lastar - 28 days ago 15
CSS Question

Children covering Parent element in JS

So I have a navigation bar with links and sub links. I currently have my links and sub links in the structure

ul
and
li
elements. The drop down navigation bar is designed using JavaScript, which is working as intended, minus one issue. I need the parent element to not disappear when the children element are shown. I have included a screenshot below along with the HTML and JS.

Children elements covering parent element

If someone provides an answer can you also explain why the parent gets covered up? I have tried to find this on stack and looked on the web and was not able to find exactly what I was looking for.

Thanks a bunch guys!



function main(){

$('.sub-elements').hide();
$('.main-elements').on('click',function(){
$(this).children().slideToggle(300);
});
}
$(document).ready(main);

<div class = "nav-bar">
<ul class = "nav-drop">
<li class = "main-elements"><a href = "#">Link 1</a>
<ul class = "sub-elements">
<li><a href = "#">Sub Link 1</a></li>
<li><a href = "#">Sub Link 2</a></li>
</ul>
</li>
<li class = "main-elements"><a href = "#">Link 2</a>
<ul class = "sub-elements">
<li><a href = "#">Sub Link 3</a></li>
<li><a href = "#">Sub Link 4</a></li>
<li><a href= "#">Sub Link 5</a></li>
<li><a href= "#">Sub Link 6</a></li>
</ul>
</li>
<li class = "main-elements"><a href='#'>Link 3</a>
<ul class = "sub-elements">
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>





sub links in the structure
ul
and
li
elements. The drop down navigation bar is designed using JavaScript, which is working as intended, minus one issue. I need the parent element to not disappear when the children element are shown. I have included a screenshot below along with the HTML and JS.

Children elements covering parent element

If someone provides an answer can you also explain why the parent gets covered up? I have tried to find this on stack and looked on the web and was not able to find exactly what I was looking for.

Thanks a bunch guys!

Answer

It should work

`function main(){
$('.sub-elements').hide();

  $('.main-elements').on('click',function(){

$(this).find('.sub-elements').slideToggle(300);
  });

}

$(document).ready(main);`
Comments