Kinder übergeordnete Element in JS

Question

So habe ich eine Navigationsleiste mit Links und Unterlinks. Ich habe derzeit meine Links und Unterlinks in der Struktur ul und li Elemente. Die Dropdown-Navigationsleiste wurde mit JavaScript erstellt, das wie vorgesehen funktioniert, abzüglich eines Problems. Ich brauche das Elternelement, um nicht zu verschwinden, wenn das Kinderelement gezeigt wird. Ich habe einen Screenshot zusammen mit dem HTML und JS eingefügt.

Children elements covering parent element

Wenn jemand eine Antwort bereitstellt, können Sie auch erklären, warum die Eltern vertuscht wird? Ich habe versucht, dies auf dem Stapel zu finden und schaute auf das Internet und war nicht in der Lage, genau zu finden, nach was ich suchte.

Danke ein Haufen Jungs!

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 der Struktur ul und li Elemente. Die Dropdown-Navigationsleiste wurde mit JavaScript erstellt, das wie vorgesehen funktioniert, abzüglich eines Problems. Ich brauche das Elternelement, um nicht zu verschwinden, wenn das Kinderelement gezeigt wird. Ich habe einen Screenshot zusammen mit dem HTML und JS eingefügt.

Children elements covering parent element

Wenn jemand eine Antwort bereitstellt, können Sie auch erklären, warum die Eltern vertuscht wird? Ich habe versucht, dies auf dem Stapel zu finden und schaute auf das Internet und war nicht in der Lage, genau zu finden, nach was ich suchte.

Danke ein Haufen Jungs!

Answer 1

Es sollte funktionieren hinzuzufügen:

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

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

$(document).ready(main); 

Answer 2

Vielleicht vergessen Sie die Kinder der Klasse in 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>