Attiva o disattiva il sottomenu e se il bambino ha fatto clic vai alla pagina

Question

Ho creato un semplice menu di attivazione che quando si fa clic una volta mostra un elenco di elementi figlio e se si fa clic nuovamente nasconde quegli elementi visibili.

Se si fa clic su un elemento figlio, tuttavia, desidero che visiti quella pagina solo che non riesco a farlo funzionare? Ha a che fare con la mia prevenzione Default?

// Language select in global nav 
$('.sub-lang').on('click', function(e) { 

if ($(this).hasClass('active') && $(e.target).parent().hasClass('active')) { 
    $(this).removeClass('active'); 
    $(this).css('height', 'auto'); 
    $(this).children('ul').hide(); 
} else { 
    $(this).addClass('active'); 
    $(this).css('height', $(this).find('ul').height() + 65); 
    $(this).children('ul').show(); 
} 

e.preventDefault(); 
}); 

Ecco la JsFiddle

Answer 1

Perché semplice non trasformare il vostro elemento di menu principale di tag di paragrafo? oppure potresti inserire un # all'interno del tuo elemento del menu principale ed eliminare l'opzione predefinita. In questo modo non è necessario impedire il default sui tuoi elementi principali.

Sebbene google.com non venga caricato all'interno di un iFrame, è possibile controllare questo violino. Funziona.

Guardate questa (con # nelle ancore) fiddle

HTML

<ul style=" "> 
    <li class="sub-lang"> 
    <a href="#">English</a> 
    <ul style=""> 
     <li><a href="http://www.google.com">International</a></li> 
     <li><a href="">UK &amp; Ireland</a></li> 
    </ul> 
    </li> 
    <li class="sub-lang"> 
    <a href="#">Espanol</a> 
    <ul style=""> 
     <li><a href="/es-es/">Español</a></li> 
     <li><a href="http://www.google.com">España</a></li> 
    </ul> 
    </li> 
    <li class="sub-lang"> 
    <a href="#">Francais</a> 
    <ul style=""> 
     <li><a href="/fr-fr/">Français</a></li> 
     <li><a href="http://www.google.com">France</a></li> 
    </ul> 
    </li> 
</ul> 

Answer 2

Qui Controllare This Out.

Spiegazione.

Invece di delegare l'evento nel suo insieme a li, ho associato l'evento a tutti gli immediati <a> figli di li e quindi prevenuto la propagazione per quell'elemento specifico. Quindi non dobbiamo capire come fermare la propagazione dell'evento (click nel nostro caso) all'elemento children.

Anche il JSFiddle può avere problemi di caricamento esterno iframe, quindi controllare la soluzione here.

Answer 3

Aggiungi questa riga prima del codice

$('.sub-lang > a').removeAttr('href'); 

Rimuovere

e.preventDefault(); 

questo dovrebbe funzionare bene

Answer 4

si dovrebbe aggiungere una condizione per questo.

if($(e.target).parent().hasClass('sub-lang')) 

Vi consentirà di fare clic sul sottomenu.

// Language select in global nav 
 
$('.sub-lang').on('click', function(e) { 
 
    
 
if($(e.target).parent().hasClass('sub-lang')){ 
 
    
 
    if ($(this).hasClass('active') && $(e.target).parent().hasClass('active')) { 
 
     $(this).removeClass('active'); 
 
     $(this).css('height', 'auto'); 
 
     $(this).children('ul').hide(); 
 
    } else { 
 
     $(this).addClass('active'); 
 
     $(this).css('height', $(this).find('ul').height() + 65); 
 
     $(this).children('ul').show(); 
 
    } 
 
    e.preventDefault(); 
 
    } 
 
});

ul li ul { 
 
    display: none; 
 
    z-index: 2; 
 
    right: 0; 
 
    background-color: #fff; 
 
    width: 250px; 
 
} 
 
ul li.active ul { 
 
    display: block; 
 
    text-align:left; 
 
    background: #f1f1f1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul style=" "> 
 
    <li class="sub-lang"> 
 
    <a href="">English</a> 
 
    <ul style=""> 
 

 
     <li><a href="http://www.google.com" traget="_blank">International</a></li> 
 

 
     <li><a href="">UK &amp; Ireland</a></li> 
 

 
    </ul> 
 
    </li> 
 

 
    
 
    <li class="sub-lang"> 
 
    <a href="/es-es/">Español</a> 
 
    <ul style=""> 
 

 
     <li><a href="http://www.google.com">España</a></li> 
 

 
    </ul> 
 
    </li> 
 

 
    <li class="sub-lang"> 
 
    <a href="/fr-fr/">Français</a> 
 
    <ul style=""> 
 

 
     <li><a href="http://www.google.com">France</a></li> 
 

 
    </ul> 
 
    </li> 
 

 
</ul>

Working Fiddle

Speranza che aiuta.

Answer 5

Penso che si debba aggiungere stopPropagation nei propri elenchi interni.

$('.sub-lang ul li').on('click', function(e) { 
 
    e.stopPropagation(); 
 
});