• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Dropdown Menü vom Schließen abhalten

J

JPM

Guest
Hi,

Altes Spiel. Und ich habe mich schon verrückt gegooglet. Problem sind meine sehr übersichtlichen Fähigkeiten im Bereich Javascript. Ich habe ein Dropdown Menü in der Navigation. Die Form sieht folgendermaßen aus
Code: 
<ul class="nav navbar-nav navbar-right">
 <li class="dropdown-full no-shadow no-border-radius">
<a data-toggle="dropdown" id="toggle" href="javascript:void(0);" class="dropdown-toggle"><i class="fa fa-envelope"></i>&nbsp;<span class="hidden-sm">Kontakt</span><span class="caret"></span></a>
<ul class="dropdown-menu no-padding">

Inhalt

</ul></li></ul>

Der dazugehörige Javascript, der mir mitgeliefert wurde, der angeblich funktionieren sollte und wie ich ihn auch ähnlich im gesamten Netz finde, sieht so aus:

Code: 
$( window ).load(function() {
$(document).on('click', '.navbar .dropdown-menu', function(e) {e.stopPropagation();}); });

Mein Problem ist: Es will nicht. Und die große Frage: Warum?

Ich habe tatsächlich versucht mich weitestgehend selbst durchzubeißen, aber ich verstehe einfach nur Bahnhof. Bin für jeden Tip dankbar.

Lieben Gruß.
 
Das erste Problem ist, dass Du in deinem JS-Code die Bibliothek jQuery benutzt, diese muss auch im Header der HTML-Seite eingebunden werden, entweder lädst du dir jQuery auf http://code.jquery.com/jquery-3.1.1.min.js runter oder verwendest eine CDN, siehe z.B http://jquery.com/download/#jquery-39-s-cdn-provided-by-maxcdn.

Das zweite Problem ist, dass du quasi gar nichts tust:D Das einzige, was bisher in deinem JS-Code steht, ist die Verhinderung von weiterführenden Events durch https://api.jquery.com/event.stopPropagation/.
Geht es in dem Tutorial, aus dem du den Code hast, eventuell noch weiter?

Ansonsten findest du auch unter http://codepen.io/search/pens?q=dropdown&limit=all&type=type-pens schon fertige Dropdowns, bei denen du dir Inspiration holen kannst, aber achte darauf, ob externe Bibliotheken wie Bootstrap für das jeweilige Beispiel benötigt werden.
 
Das Dropdown soll nicht vorzeitig schliessen, wenn darin geklickt wird?

Je nachdem, wo sich das jQuery-Script im HTML-Code befindet, wird aus:
Code: 
$( window ).load(function() {
$(document).on('click', '.navbar .dropdown-menu', function(e) {e.stopPropagation();}); });
  1. In <head></head>:
    Code: 
    $(document).ready(function() {
  $('.navbar .dropdown-menu').on('click', function (e) {
    e.stopPropagation(); 
  });
});
  2. Am Dokumentende vor </body>:
    Code: 
    $('.navbar .dropdown-menu').on('click', function (e) {
  e.stopPropagation(); 
});
  3. Fiddle-Demos:
    1. https://jsfiddle.net/SpiceLab/hqz7s00t/ - LOAD TYPE: No wrap - in <head>
    2. https://jsfiddle.net/SpiceLab/ygg3mjha/ - LOAD TYPE: No wrap - in <body>
 
Oh hab gar nicht darauf geachtet, dass das ja alles Bootstrap ist :D.
Dann stimmt mein Beitrag natürlich nur zur Hälfte, bzw. macht gar keinen Sinn mehr:oops:
 
LeCub schrieb:
Oh hab gar nicht darauf geachtet, dass das ja alles Bootstrap ist :D.
Zum Vergrößern anklicken....
Oder Dir fehlt das geschulte Auge, es (anhand der KlassenNamen) als solches zu identifizieren :D

Denn...
LeCub schrieb:
Ich gehöre zu denen, die meistens alles selber schreiben.
Ich finde, dass Individualität beim Webdesign aller oberste Priorität hat und würde somit ein CSS-Framework nur aufgrund der Grid-/Layoutfunktionen nutzen, die sich aber dank Flexbox mittlerweile von Hand genauso einfach umsetzen lassen.
Somit nutze Ich Frameworks nur noch wenn es entweder Kundenwunsch ist oder Ich sehr schnell eine gut aussehende Seite brauche. Für solche Fälle bin Ich außerdem Fan von kleinen Alternativprojekten wie http://bulma.io/ oder https://milligram.github.io/.
Zum Vergrößern anklicken....
Zitat-Quelle: https://www.html.de/threads/responsive-webdesign.56781
 
LeCub schrieb:
Dann stimmt mein Beitrag natürlich nur zur Hälfte, bzw. macht gar keinen Sinn mehr:oops:
Zum Vergrößern anklicken....
Kannst ihn ja mittels [s][/s] durchstreichen / revidieren :cool:
LeCub schrieb:
Das erste Problem ist, dass Du in deinem JS-Code die Bibliothek jQuery benutzt, diese muss auch im Header der HTML-Seite eingebunden werden, entweder lädst du dir jQuery auf http://code.jquery.com/jquery-3.1.1.min.js runter oder verwendest eine CDN, siehe z.B http://jquery.com/download/#jquery-39-s-cdn-provided-by-maxcdn.

Das zweite Problem ist, dass du quasi gar nichts tust:D Das einzige, was bisher in deinem JS-Code steht, ist die Verhinderung von weiterführenden Events durch https://api.jquery.com/event.stopPropagation/.
Geht es in dem Tutorial, aus dem du den Code hast, eventuell noch weiter?

Ansonsten findest du auch unter http://codepen.io/search/pens?q=dropdown&limit=all&type=type-pens schon fertige Dropdowns, bei denen du dir Inspiration holen kannst, aber achte darauf, ob externe Bibliotheken wie Bootstrap für das jeweilige Beispiel benötigt werden.
Zum Vergrößern anklicken....
 
Ach, Ich bin einfach begeistert. Danke, meine Herren. Läuft einwandfrei und problemlos. Ich danke!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben