2016-05-09 8 views
-1

Ich habe eine kleine Funktion, die ich geschrieben habe, um ein Untermenü auf einer Wordpress-Site zu verstecken, die FoundationPress als Vorlage verwendet und leider habe ich festgestellt, dass es nicht Arbeiten Sie auf Chrome PC oder FF. Ich habe zuerst toggle verwendet, um es zu verstecken, wechselte aber zu .hide() und stellte es sogar auf .css ein ("display", "none"), aber das Problem besteht immer noch auf der PC-Seite.jQuery ausblenden funktioniert nur auf Chrome Mac und IE, nicht Chrome PC oder FF

$(document).ready(function() { 
    $('.top-bar-section li.active:not(.has-form) a:not(.button)').click(function() { 
     $("li.active ul.sub-menu.dropdown").hide(); 
    }); 
    $('.top-bar-section ul li').hover(function() { 
     if($("li.active ul.sub-menu.dropdown").css("display", "none")){ 
      $("li.active ul.sub-menu.dropdown").css("display", "block"); 
     } 
    }); 
}) 

Was passieren soll, ist der Benutzer auf einen Bereich der Website navigiert und verwendet dann das Menü oben auf jeden Abschnitt hinunter zu springen. Also hier: http://development.maclynutility.com/littlefriends/childrens-services/ Wenn Sie das Menü verwenden, um irgendwo innerhalb des aktuellen Abschnitts (Kinder-Dienste) zu navigieren, bleibt das Menü auf einem PC mit Chrome oder FF aktiv, verbirgt sich aber auf einem Mac oder IE. Ich brauche es, um die ganze Zeit zu verstecken und zu arbeiten, wie es auf IE oder Mac Chrome tut. Danke für jede Hilfe.

+1

erste Sache, die ich überprüfen würde, wenn $ ("li.active ul.Menu.dropdown") tatsächlich etwas findet –

+0

Es sieht aus wie das Problem ist mit der Hover-Funktion und nicht der Selektor in der Klick-Funktion. Das Untermenü verbirgt sich richtig, wenn ich die zweite Hover-Funktion auskommentiere, aber ich benutze das, um das Menü wieder anzuzeigen, wenn der Benutzer darauf zurückkommt. Ich kann sehen, dass sobald die Seite lädt die Anzeige-Eigenschaft zurück zu blockieren von keiner wie es soll, aber auf dem Mac bleibt es versteckt und zeigt tatsächlich auf dem PC trotz der Eigenschaft eingestellt zu blockieren. Ist .hover() die richtige Sache dort zu benutzen? – Brent

Antwort

0

Es funktioniert nicht, weil es nicht in der Lage ist die

li.active ul.sub-menu.dropdown 

Vergewissern Sie sich, was Sie Targeting sind zu finden.

+0

Ich bin neugierig, warum es bei einigen Browsern funktioniert und nicht bei anderen. Verzeih mir, aber das ist das erste Mal, dass ich auf ein Problem wie dieses gestoßen bin. Wie kann ich nach etwas suchen, wenn in der Konsole kein Fehler angezeigt wird? Ich sehe aber vielleicht nicht am richtigen Ort aus. – Brent

+0

Sie müssen die verschiedenen berechneten Stile in verschiedenen Browsern überprüfen. –

+0

Wird tun, danke. – Brent

0
if($("li.active ul.sub-menu.dropdown").css("display", "none")){ 
    $("li.active ul.sub-menu.dropdown").css("display", "block"); 
} 

sollte sein:

if($("li.active ul.sub-menu.dropdown").css("display") === "none"){ 
    $("li.active ul.sub-menu.dropdown").css("display", "block"); 
} 

seit immer die ausgewählten dom Elemente verstecken und zurück, die „truthy“ sind und daher die, wenn Körper ausgeführt wird, die Drop-down zeigt.

Da es entweder angezeigt wird, wenn es ausgeblendet ist, oder nichts tut, wenn es angezeigt wird, wird diese Funktion nichts anderes tun, als wenn Sie die if-Anweisung vollständig auslassen würden. Hast du vor, es umzuschalten? Oder vielleicht im Schweben zu zeigen, aber hinterher verstecken?

+0

Die Absicht dort ist, das Dropdown nach dem Hover darauf zu zeigen und es wird von der ersten Funktion versteckt, weshalb ich die if-Anweisung in einen Schwebezustand versetzt, der von der aktiven Menü-Klasse ausgelöst wird. Problem ist, dass es in Chrome inkonsistent angezeigt wird, obwohl das Display so eingestellt ist, dass es nicht auf dem Mac oder IE angezeigt wird. – Brent

+0

Wann wird die Klasse "active" zum li hinzugefügt? Innerhalb der Hover-Funktion können Sie $ (this) verwenden, um ein jQuery-Objekt zu erhalten, das die li enthält, über der es sich befindet. Vielleicht suchst du nach $ (this) .find ("ul-menu.dropdown"). Show(); –

+0

Es ist möglich, aber ich kann nicht scheinen, dass das funktioniert, egal was ich mache. Ich weiß nicht, warum die Hove-Funktion der Klick-Funktion entgegenwirken würde, obwohl ich nicht über irgendetwas schwebe. – Brent

Verwandte Themen