Javascript zum Öffnen/Schließen Untermenü nicht mit <input> und <label> im Mix arbeitet

Question

Ich versuche, ein ansprechendes Handy-Menü zu erstellen, die die folgende html hat:

<ul id="mobileNav"> 
    <li class="toggle"><a href="#canvas" id="mobile-close-nav" class="icon-close"></a></li> 
    <li class="folder"> 
      <input type="checkbox" name="mobile-folder-toggle" id="mobile-folder-toggle" class="folder-toggle-box hidden"> 
      <label for="mobile-folder-toggle" class="folder-toggle-label" data-href="#">About</label> 
      <div class="subnav"> 
       <ul class="sub-menu"> 
        <li class="page-collection"><a href="#">About Us</a></li> 
        <li class="page-collection"><a href="#">The Team</a></li> 
       </ul> 
      </div> 
    </li> 
    <li class="folder"> 
      <input type="checkbox" name="mobile-folder-toggle" id="mobile-folder-toggle" class="folder-toggle-box hidden"> 
      <label for="mobile-folder-toggle" class="folder-toggle-label" data-href="#">About</label>Products</label> 
      <div class="subnav"> 
       <ul class="sub-menu"> 
        <li class="page-collection"><a href="#">First</a></li> 
        <li class="page-collection"><a href="#">Second</a></li> 
        <li class="page-collection"><a href="#">Third</a></li> 
       </ul> 
      </div> 
     </li> 
</ul> 

ich die unten stehende Skript bin mit öffnen/schließe das Untermenü:

<script type="text/javascript"> 
jQuery(document).ready(function($) { 
$('.sub-menu').hide(); 
$("li:has(ul)").click(function(){ 
     $("ul",this).toggle(); 
    }); 
}); 
</script> 

aber es funktioniert nicht für mich mit dem "Eingang" und "Label" in der Mischung. Es funktioniert, wenn die folgenden:

<input type="checkbox" name="mobile-folder-toggle" id="mobile-folder-toggle" class="folder-toggle-box hidden"> 
      <label for="mobile-folder-toggle" class="folder-toggle-label" data-href="#">About</label> 

wird dies geändert:

<a class="folder-toggle-label" data-href="#">About</a> 

("Input" wird entfernt, und "label" wird auf "a") aber ich muss arbeiten wie beim ursprünglichen Code, weil die Eingabe/Label-Kombination dort sein muss, um etwas anderes zu kontrollieren. Wie ändere ich das Skript, damit es funktioniert?

Vielen Dank im Voraus!

Answer 1

Hier habe ich versucht, damit es funktioniert:

$(document).ready(function($) { 
 
$('.sub-menu').hide(); 
 
$(".folder-toggle-box").change(function(){ 
 
     $(this).parent().find("ul").toggle(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 
<ul id="mobileNav"> 
 
    <li class="toggle"><a href="#canvas" id="mobile-close-nav" class="icon-close"></a></li> 
 
    <li class="folder"> 
 
      <input type="checkbox" name="mobile-folder-toggle" id="mobile-folder-toggle1" class="folder-toggle-box hidden"> 
 
      <label for="mobile-folder-toggle1" class="folder-toggle-label" data-href="#">About</label> 
 
      <div class="subnav"> 
 
       <ul class="sub-menu"> 
 
        <li class="page-collection"><a href="#">About Us</a></li> 
 
        <li class="page-collection"><a href="#">The Team</a></li> 
 
       </ul> 
 
      </div> 
 
    </li> 
 
    <li class="folder"> 
 
      <input type="checkbox" name="mobile-folder-toggle" id="mobile-folder-toggle2" class="folder-toggle-box hidden"> 
 
      <label for="mobile-folder-toggle2" class="folder-toggle-label" data-href="#">Products</label> 
 
      <div class="subnav"> 
 
       <ul class="sub-menu"> 
 
        <li class="page-collection"><a href="#">First</a></li> 
 
        <li class="page-collection"><a href="#">Second</a></li> 
 
        <li class="page-collection"><a href="#">Third</a></li> 
 
       </ul> 
 
      </div> 
 
     </li> 
 
</ul>

von sprudelnden

Answer 2

Eigentlich müssen Sie nur verhindern, dass die Veranstaltung. Fügen Sie einfach return false wie folgt hinzu.

jQuery(document).ready(function($) { 
$('.sub-menu').hide(); 
$("li:has(ul)").click(function(){ 
     $("ul",this).toggle(); 
     return false; 
    }); 
});