jQuery-Menü mit Submenü-Trigger

Question

Ich versuche, einen Trigger für ein HTML-Menü zu erstellen, die beim Anklicken Untermenüs umschalten wird. Das Problem mit dem folgenden Code ist, wenn Sie auf den Auslöser klicken (class = "open"), schaltet er alle Untermenüpunkte gleichzeitig um. Ich möchte, dass der Auslöser mit jQuery jeweils ein Untermenü umschaltet. Hier ist mein Code:

HTML

<ul> 
<li class="menu-item-has-children">Item 1</li> 
    <a class="open">+</a> 
    <ul class="sub-menu"> 
    <li>Sub Item 1</li> 
    <li>Sub Item 2</li> 
    <li class="menu-item-has-children">Sub Item 3</li> 
    <a class="open">+</a> 
     <ul class="sub-menu"> 
     <li>Sub Sub Item 1</li> 
     <li>Sub Sub Item 2</li> 
     <li>Sub Sub Item 3</li> 
     <li>Sub Sub Item 4</li> 
     <li>Sub Sub Item 5</li> 
     </ul> 
    <li>Sub Item 4</li> 
    <li>Sub Item 5</li> 
</ul> 

JQUERY

$(document).ready(function() { 
    $('.open').click(function() { 
    $('li.menu-item-has-children').parent().closest('.sub-menu').toggle(); 
    }); 
}); 

CSS

ul li { 
    list-style-type:none; 
} 
.open { 
    width:20px; 
    height:20px; 
    background-color:red; 
    color:#fff; 
    display:block; 
    cursor:pointer; 
    text-align:center; 
} 
.sub-menu { 
    display:none; 
} 

VIEW THE JS FIDDLE HERE

Danke :)

Answer 1

Es gibt keine kontextbezogenen this hier. Es sollte sein:

$(document).ready(function() { 
    $('.open').click(function() { 
    $(this).next('.sub-menu').toggle(); 
    }); 
}); 

Wenn Sie die $('li.menu-item-has-children') verwenden, wählt sie buchstäblich alles und nicht derjenige, der angeklickt wird. Das aktuelle Element, das das Klickereignis ausgelöst hat, kann über das Schlüsselwort this abgerufen werden, und ich habe es oben verwendet, um es funktionieren zu lassen. Da Sie eine perfekte Struktur haben, wie das Untermenü <a> folgt, funktioniert der obige Code mit .next().

Snippet

$(document).ready(function() { 
 
    $('.open').click(function() { 
 
    $(this).next('.sub-menu').toggle(); 
 
    }); 
 
});

ul li { 
 
list-style-type:none; 
 
} 
 
.open { 
 
    width:20px; 
 
    height:20px; 
 
    background-color:red; 
 
    color:#fff; 
 
    display:block; 
 
    cursor:pointer; 
 
    text-align:center; 
 
} 
 
.sub-menu { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="menu-item-has-children">Item 1</li> 
 
    <a class="open">+</a> 
 
    <ul class="sub-menu"> 
 
    <li>Sub Item 1</li> 
 
    <li>Sub Item 2</li> 
 
    <li class="menu-item-has-children">Sub Item 3</li> 
 
    <a class="open">+</a> 
 
    <ul class="sub-menu"> 
 
     <li>Sub Sub Item 1</li> 
 
     <li>Sub Sub Item 2</li> 
 
     <li>Sub Sub Item 3</li> 
 
     <li>Sub Sub Item 4</li> 
 
     <li>Sub Sub Item 5</li> 
 
    </ul> 
 
    <li>Sub Item 4</li> 
 
    <li>Sub Item 5</li> 
 
    </ul> 
 
</ul>

JSFiddle: https://jsfiddle.net/bdh7seoh/

Answer 2

andere Option ist eine andere Klasse für Ihre sub-menu zu erstellen.

$(document).ready(function() { 
 
\t $('.open').click(function() { 
 
\t \t $('li.menu-item-has-children').parent().closest('.sub-menu').toggle(); 
 
    }); 
 
    
 
    $('.open-sub1').click(function() { 
 
\t \t $('.sub-menu1').toggle(); 
 
    }); 
 
});

ul li { 
 
list-style-type:none; 
 
} 
 
.open, .open-sub1 { 
 
    width:20px; 
 
    height:20px; 
 
    background-color:red; 
 
    color:#fff; 
 
    display:block; 
 
    cursor:pointer; 
 
    text-align:center; 
 
} 
 
.sub-menu, .sub-menu1 { 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li class="menu-item-has-children">Item 1</li> 
 
    <a class="open">+</a> 
 
    <ul class="sub-menu"> 
 
     <li>Sub Item 1</li> 
 
     <li>Sub Item 2</li> 
 
     <li class="menu-item-has-children">Sub Item 3</li> 
 
     <a class="open-sub1">+</a> 
 
     <ul class="sub-menu1"> 
 
      <li>Sub Sub Item 1</li> 
 
      <li>Sub Sub Item 2</li> 
 
      <li>Sub Sub Item 3</li> 
 
      <li>Sub Sub Item 4</li> 
 
      <li>Sub Sub Item 5</li> 
 
     </ul> 
 
     <li>Sub Item 4</li> 
 
     <li>Sub Item 5</li> 
 
    </ul> 
 
</ul>