Löschen des CSS-Menü-Hover-Status beim Klicken (Seite wird über Ajax geladen)

Ich habe ein CSS-Dropdown-Menü auf einer Website. Ganz oben gibt es eine Liste von übergeordneten Kategorien. Wenn Sie den Mauszeiger über einen Punkt halten, wird ein Dropdown-Menü angezeigt, in dem Sie auf eine der untergeordneten Kategorien klicken können.

Wenn Sie auf die untergeordnete Kategorie klicken, wird eine Ajax-Seitenladung ausgelöst und der Inhalt der Seite wird ersetzt. Funktioniert gut.

Aber das Problem ist, weil die Seite nicht neu geladen wird, ist das Dropdown-Menü immer noch da. Du musst die Maus davon bewegen, damit sie verschwindet. Das ist nervig. Wir möchten, dass das Menü nicht mehr angezeigt wird, wenn Sie auf eine untergeordnete Kategorie klicken. Auf einem Touch-Gerät ist dieses Verhalten noch ärgerlicher.

Anstatt den Code hier zu veröffentlichen, werde ich einen Link auf die Website setzen: http://tinyurl.com/blvtlwz Das Menü ist in Frage - "Competition Horses", "Leisure Horses" usw.

Ich wäre an irgendwelchen Ideen interessiert, wie man den Hover-Status löscht, wenn ein Klick erkannt wird, oder alternativ eine bessere Art, mit dem Menü umzugehen? Ich habe mit jQuery removeClass() herumgespielt, aber ich hatte nicht viel Glück.

Vielen Dank

2
nl ja ru

3 Antworten

Sie könnten .on anstelle von .click verwenden

// This might need some tweeking for it to work on your end
$('#nav li').on("click", function(e){
  $('#nav li').hide();
});

// When you are scrolled down a bit and click a top menu link (eg 'Competition Horses') you will "jump to top". This will prevent that.
$('#nav ul li a').on("click", function(e){
  e.preventDefault();
});
1
hinzugefügt
Ich mag das zweite Segment, das den Sprung zurück an die Spitze verhindert - danke!
hinzugefügt der Autor dopey, Quelle

Sie können mit diesem Skript versuchen:

 $(function(){
   $('#nav li').hover(function() {
     $('ul',this).show();//this will show the hidden ul
   });
  $('#nav li ul li').click(function() {
     $(this).parent().hide().end();//this will hide the ul
  });
});
1
hinzugefügt
Das funktioniert ein Vergnügen, ich habe es noch nicht vollständig getestet, aber bis jetzt sieht es gut aus :) Vielen Dank
hinzugefügt der Autor dopey, Quelle
$(document).ready(function() {
$('#nav li ul li').click(function() {
    $(this).parent().fadeOut();
    return false;//comment this to allow propagaton to new page
});
$('#nav li ul li').hover(function() {
 $(this).parent().fadeIn(); 
 });
});​

Siehe Demo

0
hinzugefügt
Danke, das habe ich mal gemacht, aber nachdem ich das Menü einmal angeklickt hatte, konnte es nicht mehr angeklickt werden.
hinzugefügt der Autor dopey, Quelle
JavaScript - Deutsche Gemeinschaft
JavaScript - Deutsche Gemeinschaft
3 der Teilnehmer

In dieser Gruppe sprechen wir über JavaScript.