Jak zachować atrybuty zawisu podczas wyłączania kliknij

Question

Tak mam tę listę z pewnym efektem dymku dodanym przez CSS. HTML:

<li><a href="#">Current Period</a> 
    <ul> 
     <li><a href="#">2012</a> 
     <li> a href="#">2011</a> //...you get the point 

CSS:

#nav a:hover { 
    background-color: #fff; 
    color: #333; 
} 

Gdy użytkownik znajdzie się nad obecnym okresie listę dzieci pojawiają się elementy (2012, 2011 ..., które mają własnych dzieci). Mój problem polega na tym, że użytkownicy mogą kliknąć "Bieżący okres". I udało się usunąć kliknięcie dodając klasę do kotwicy tak:

<li><a href="#" class="noclick">Current Period</a> .... 

CSS:

.noclick { pointer-events: none; cursor: default; }

ale to oczywiście usuwa funkcję aktywowania. Chcę utrzymać efekt "unosić", jednocześnie powodując, że przycisk jest nieklikalny (myślałem o javascript, ale chcę bardziej "bezpośredniego" rozwiązania). Doceniam każdą pomoc :)

Answer 1

w Twoim teście obsługi kliknij, czy element kliknięty ma tę klasę:

$("#nav a").click(function(e){ 
    if ($(e.target).hasClass("noclick")) 
     return false; 

    // your other code here 
}); 

Należy pamiętać, że testując numer target element dla zdarzenia, które nie spowoduje liże na elementach dzieci z pracy.

Lub jeśli klasa "noclick" nie zmienia się dynamicznie, tj.Te „noclick” linki zaczynają jako i zawsze będzie „noclick”, można zmienić tak, że selektor click obsługi nie jest związany z tych poszczególnych elementów:

$("#nav a").not(".noclick").click(function() { ... 

Answer 2

Czy próbowałeś?

$('.noclick').unbind('click'); 

lub

$('.noclick').click(function(e){e.preventDefault();}); 

lub

<a href="javascript:void(0);">Text</a> 

Answer 3

Można użyć klasy noClick aby zapobiec zdarzenia niewykonania

('.noclick').on('click' , function(e) { 
    e.preventDefault(); 
}); 

Answer 4

Wystarczy zmienić następujący wiersz:

<li><a href="#" class="noclick">Current Period</a> .... 

dla tej jednej

<li><a href="#" class="noclick" onclick="return false;">Current Period</a> .... 

i zmienić następujące CSS:

.noclick { pointer-events: none; cursor: default; } 

dla tej jednej

.noclick { cursor: default; } 

że powinien robić to, co chcesz.

Answer 5

na .noclick klasy usunąć wskaźnik-events

.noclick { cursor: default; } 

i dodać js do .noclick elementowi

$('.noclick').each(function() { 
    var $this = $(this); 
    $this.hover(function() { 
     // do something... 
    }); 
    $this.click(function() { 
     return false; 
    }); 
});