Wie erstelle ich eine jquery-Funktion, die meinen CSS-Hover überschreibt, während Javascript aktiviert ist?

Ich habe ein Dropdown-Menü in reinem CSS gebaut und es funktioniert perfekt. Im Moment funktioniert es nur, wenn es über uns schwebt. Wenn Sie den Mauszeiger über #headerNav bewegen, wird das Dropdown-Menü für mein .dropdownMenu angezeigt, und sobald der Cursor von dropdownMenu oder #headerNav entfernt wird, wird das Menü ausgeblendet.Wie erstelle ich eine jquery-Funktion, die meinen CSS-Hover überschreibt, während Javascript aktiviert ist?

Da ich möchte, dass Benutzer mit js aktiviert, um eine bessere Erfahrung zu haben, habe ich beschlossen, einige jquery zu verwenden, um den gleichen Effekt wie click here zu erhalten. Das hält das Dropdown-Menü grundsätzlich nach einem Klick geöffnet und klickt nur nicht auf den Mauszeiger.

standardmäßig Ich habe .dropdownMenu auf "display: none" und dann das Dropdown-Menü zu zeigen, ich habe so etwas wie dies:

#headerNav:hover .dropdownMenu { 

     display:block; 


     //more code 


}

Hier ist mein html:

<header> 
    <div id='headerContent'> 
    <div id='LogoHolder'> 
    </div> 
    <nav id='headerNav'> 
     <ul> 
     <li id='photoThumbnail'></li> 
     <li id='currentUser'> 
      <ul class="dropdownMenu"> 
      <li>link1</li> 
      <li>link2</li> 
      <li>link3</li> 
      <li>link4</li> 
      <li>link5</li> 
      <li>link6</li> 
      </ul> 
     </li> 
     </ul> 
    </nav> 
    </div> 
</header>

Ich habe jetzt seit 2 Tagen experimentiert und kann nicht scheinen, eine Art, dies zu tun. Ich würde eine Hilfe mit klaren Beispielen schätzen. Dank

Mit freundlichen Grüßen

Quelle

2012-03-26 LondonGuy

Hoffnung so wird diese Ihnen helfen, http://stackoverflow.com/questions/2754546/can-i-disable-a-css-hover-effect-via-javascript –

ich die eleganteste Art und Weise denken, mit Javascript aktiviert/deaktiviert zu behandeln ist in den:

<html class='no-js'>

dann die Klasse mit Javascript zu entfernen.

also in Ihrem Fall würden Sie

.no-js #headerNav:hover .dropdownMenu { 
     display:block; 
}

verwenden, um nur Benutzer mit deaktiviertem Javascript Ziel.

Siehe: http://paulirish.com/2009/avoiding-the-fouc-v3/ für weitere Details.

Quelle

2012-03-26 16:21:51 mddw

Tolle Lösung, da ich bereits modernisiz verwenden. Jetzt kann ich auf die js aufpassen, ohne mich um den Schwebeflug zu sorgen, weil es nur einsteigt, wenn js gesperrt ist. – LondonGuy

Statt Ihre nav Targeting durch ID ist, um es eine Klasse hinzufügen, sagen hover-nav und dementsprechend Ihre CSS aktualisieren:

.hover-nav:hover .dropdownMenu

Dann in Ihrem Javascript entfernen Sie die CSS Klasse aus dem ul

$(#headerNav').removeClass('hover-nav');

und verwenden Sie Ihren Klick, um das Plugin wie gewohnt anzuzeigen.

Quelle

2012-03-26 15:40:53

Der erste Teil war zum Anhalten Das Drop-down-Menü zeigt den Hover an. Danke – LondonGuy

Ihre CSS ist .dropdownMenu Ihre HTML ist class="drop DownMenu"

CSS Groß- und Kleinschreibung.

Quelle

2012-03-26 15:45:26

Hallo korrigierte es, aber das war eine alte Kopie und eingefügt Version des Codes, den ich derzeit mit der Korrektur verwende. Danke für die Stelle. – LondonGuy

Nathan schlug es auf den Kopf. Ich werde weitermachen und den Code einfügen, da ich damit schon fast fertig bin.

CSS

#headerNav .hideable{ display:none; } 
#headerNav:hover .hideable{ display:block; }

HTML (nur hinzufügen hideable zu Ihrem UL)

<ul class="dropDownMenu hideable">

jQuery

$('.hideable').hide().removeClass('hideable'); 

$('#headerNav').click(function(){ 
    $(this).find('.dropDownMenu').slideToggle(); 
});

Ersetzen Sie oben mit dieser jQuery, um die Möglichkeit zum Schließen des Menüs hinzuzufügen, wenn irgendwo anders geklickt wird.

$('.hideable').hide().removeClass('hideable'); 

$('#headerNav').click(function(e){ 
    $(this).find('.dropDownMenu').slideToggle(); 
    e.stopPropagation(); 
}); 

$('html').click(function(e){ 
    $('.dropDownMenu').slideUp(); 
});

Quelle

2012-03-26 15:46:28

Hier ist die Geige: http://jsfiddle.net/tcloninger/BDgEY/ –

Ich räumte die Fiedel etwas auf, um die Aktionen an "currentUser" anstelle von "headerNav" anzuhängen. –

Ich werde es versuchen und melden. Ich habe den Link jfiddle angeschaut und frage mich, ob es eine Möglichkeit gibt, das Menü auch verschwinden zu lassen, wenn irgendwo auf dem Bildschirm geklickt wird und nicht nur die eigentliche Schaltfläche? – LondonGuy

so etwas wie dieses Versuchen:

$(document).ready(function(){ 
    $('#headerNav .dropDownMenu').hover(function() { 
    $(this).show(); 
    }); 

    $('*:not(#headerNav .dropDownMenu)').click(function() { 
    event.stopPropagation(); 
    $("#headerNav .dropDownMenu").hide(); 
    }); 
});

Quelle

2012-03-26 15:53:33 kubedan

Wie erstelle ich eine jquery-Funktion, die meinen CSS-Hover überschreibt, während Javascript aktiviert ist?

Antwort

Verwandte Themen