wie etwas zu tun, wenn ein Element Geschwister hat

Question

Ich habe eine ungeordnete Liste als eine linke nav mit ziemlich viele Links drin. Die meisten Listenelemente haben eine andere ungeordnete Liste als ein ihnen zugeordnetes Untermenü. Einige Links haben jedoch keine Untermenüs. Ich möchte das Standard-Klickverhalten auf den Links deaktivieren, die Untermenüs haben, damit ich das Untermenü animieren kann. Aber auf den Links ohne Untermenü muss der Link klickbar sein. die Javascript Ich habe dies zu tun ist:

$(function(){ 
    if($("#leftNav ul:first > li > a").siblings().size() > 0){ 
     $("#leftNav ul:first > li > a").click(function(e){ 
      e.preventDefault(); 
     }); 
    } 

das Problem ist, dass dies das Standardklickverhalten für alle Links deaktiviert, nicht nur diejenigen, die mit Geschwistern. die html für das linke nav sieht wie folgt aus

<div id="leftNav"> 
    <ul> 
     <li> 
      <a href="#">Link 1</a> 
      <ul> 
       <li><a href="#">Submenu Link 1</a></li> 
       <li><a href="#">Submenu Link 2</a></li> 
       <li><a href="#">Submenu Link 3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Link 2</a></li> 
    </ul> 
</div> 

so das Klickverhalten benötigen würde 1 den Link entfernt werden, weil es die <ul> als Geschwister hat. Link 2 hat keine Geschwister, also sollte es in Ruhe gelassen werden.

Answer 1

Eine Möglichkeit, es zu tun ist, diese li Elemente zu finden, die ein Nachkomme ul haben, und in diesem li die a finden und diejenigen Ziel:

$('#leftNav li:has("ul")').find('a').each(
    function(){ 
     $(this).click(
      function(){ 
       alert("No clicking here"); 
       return false; 
      }); 
    }); 

JS Fiddle demo.

$('#leftNav li:has("ul")').find('a').each(
    function(){ 
     $(this).click(
      function(){ 
       alert("No clicking here"); 
       return false; 
      }); 
    }); 
$('#leftNav li:has("ul")').hover(
    function(){ 
     $(this).find('ul').slideDown(); 
    }, 
    function(){ 
     $(this).find('ul').slideUp(); 
    }); 

Slightly more useful JS Fiddle demo:

---

Edited eine überarbeitete jQuery hinzuzufügen.

Answer 2

<script type="text/javascript"> 
    $(function() { 
     $("#leftNav ul:first > li > a").each(function (a, b) { 
      var t = $(b); 
      //alert(t.siblings().size()); 
      if (t.siblings().size() > 0) { 
       t.click(function (e) { 
        e.preventDefault(); 
       }); 
      } 
     }); 
    }); 
</script> 

Answer 3

einfachste Weg:

$("#leftNav ul:first > li > a").not(":only-child").click(function(e){ 
     e.preventDefault(); 
}); 

Answer 4

ich nicht zu kommentieren, eine ausreichend hohe Reputation Score, aber wollte nur sagen, dass Chuck Antwort perfekt für mich gearbeitet (außer in FIREFOX?). Mein Menü verbirgt sich auch andere Menüs öffnen, bevor Sie ein Öffnen Sie geklickt haben - hier ist der Code, den ich verwendet:

jQuery(document).ready(function($) { 
    $('ul.menu li ul.sub-menu').hide(); //Hide children by default 

    $("ul.menu:first > li > a").not(":only-child").click(function(){ 
      event.preventDefault(); 
      $(this).parent().siblings().children('ul.menu li ul.sub-menu').css('display','none'); 
      $(this).siblings('.sub-menu').slideToggle(800); 
     }); 
});