Детское покрытие Родительский элемент в JS

Question

Итак, у меня есть панель навигации со ссылками и ссылками. В настоящее время у меня есть ссылки и ссылки в структуре ul и li элементов. Выпадающая панель навигации разработана с использованием JavaScript, который работает по назначению, минус одна проблема. Мне нужно, чтобы родительский элемент не исчезал при показе дочернего элемента. Я включил скриншот ниже вместе с HTML и JS.

Children elements covering parent element

Если кто-то дает ответ вы можете также объяснить, почему родитель получает прикрыли? Я попытался найти это на стеке и посмотрел в Интернете и не смог найти именно то, что искал.

Спасибо, ребята!

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>

суб звеньев в структуре ul и li элементов. Выпадающая панель навигации разработана с использованием JavaScript, который работает по назначению, минус одна проблема. Мне нужно, чтобы родительский элемент не исчезал при показе дочернего элемента. Я включил скриншот ниже вместе с HTML и JS.

Children elements covering parent element

Если кто-то дает ответ вы можете также объяснить, почему родитель получает прикрыли? Я попытался найти это на стеке и посмотрел в Интернете и не смог найти именно то, что искал.

Спасибо, ребята!

Answer 1

Он должен работать:

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

    $('.main-elements').on('click', function() { 
    $(this).find('.sub-elements').slideToggle(300); 
    }); 
} 

$(document).ready(main); 

Answer 2

Может быть, вы забыли добавить класс детей в JQuery

function main(){ 
 

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<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>