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

[ERLEDIGT] jQuery one() & preventDefault()

Chronos

Chronos

Aktives Mitglied
Hallo Forum,

ich stehe leider gerade etwas auf dem Schlauch mit der jQuery-Funktion one(), diese wird ja nur ein mal ausgeführt - das habe ich verstanden. Mein Problem ist jetzt das ich am iPad ein Untermenü per klick öffnen will und bei einem zweiten Klick den jeweiligen Hauptpunkt.

Also der erste Klick zeigt die Unterpunkte in etwa so:
Hauptmenü1 -> U1 U2 U3

und der zweite Klick öffnet H1 direkt.

Ein anderes Beispiel

Klicke ich als erstes auf Hauptmenü1 und dann auf Hauptmenü2 oder 3 usw. und klicke DANN irgendwann also ein zweites mal auf Hauptmenü1, wird dieses geöffnet (logisch wegen one() halt). Aber so will ich das nicht, es soll das für jedes Element an sich tun.

Das was ich suche ist quasi ein Reset für jedes Element im Hauptmenü, wenn man das so sagen kann.

Wirklich viel hab ich nicht aber juor das wäre mein bissl Code

Code: 
if (('ontouchstart' in document.documentElement)) {
        var mainLinks = $('.navbar-main-collapse a');

        mainLinks.one("click", function(e) {      
            e.preventDefault();
        });
    }

Denke mal das es nicht so schwierig ist aber wirklich ne Idee hab ich im Moment auch nicht.
Danke für Denkanstöße und Ideen^^.
 
Werbung:
Ich würde mir ein Hilfskonstrukt durch setzen einer Variablen oder Hinzufügen einer CSS-Klasse bauen.

Pseudocode:
Code: 
$('.hauptmenue-punkte').on('click', function() {
  $('.hauptmenue-punkte').removeClass('already-clicked').slideUp();
  $(this).addClass('already-clicked').slideToggle();

  if  ( $(this).hasClass('already-clicked') ) {
    $(this).find('.unterpunkt').tuWasDamit
  } else {
    return false;
  }
})
 
Danke erst mal, an sich geht das ja so aber nicht genau wie ich es brauchen würde.
Dazu muss ich noch etwas erklären, die Hauptmenüpunkte sind selbst auch Links, klickt man auf diese kommt man auf eine Übersichtsseite mit deren jeweiligen Unterpunkten.
Beim hovern (und am iPad eben durch click) auf den Hauptmenüpunkten sieht man eben diese Unterpunkte.

Sprich mit deiner Lösung kann man zwar von Hauptmenüpunkt zu Hauptmenüpunkt wechseln aber die eigenen Links in den Punkten nicht mehr klicken.
Deswegen, one() arbeitet genau wie ich es will nur setzt es den Klick pro Hauptmenüpunkt beim Wechsel auf einen anderen nicht zurück.
Die anderen Lösungen im Netz gehen aber auch davon aus, dass man im Hauptmenü selbst keine Links hat.
 
Werbung:
Sprich mit deiner Lösung kann man zwar von Hauptmenüpunkt zu Hauptmenüpunkt wechseln aber die eigenen Links in den Punkten nicht mehr klicken.
Deswegen, one() arbeitet genau wie ich es will nur setzt es den Klick pro Hauptmenüpunkt beim Wechsel auf einen anderen nicht zurück.
Zum Vergrößern anklicken....

So wirklich verstehe ich jetzt nicht, worauf du hinaus willst. Wenn du auf einen Untermenüpunkt klicken möchtest, ohne dass der Click im hierarchisch darüber liegenden Element registriert wird, wäre event.stopPropagation() vielleicht eine Option. Umgekehrt könnte man bei Click natürlich auch Variablen setzen/ändern/löschen, die zur "Benachrichtigung" anderer Elemente dienen.

Mit one() habe ich nie gearbeitet, aber die Funktion macht doch auch nichts anderes als Zählvariablen zu setzen oder ein unbind() auf Eventlistener auszuführen. So etwas kann man auch manuell und damit flexibler gestalten. Außerdem gibt es noch trigger() für Custom Events.

Wenn ich mich da jetzt hineinarbeiten würde, würde ich sicher eine Lösung finden. Aber ich habe heute keine Zeit dazu.
 
Ich habe mal kurz eine Demo gebaut die zeigt wie es gehen soll:

HTML:
HTML: 
<html>
    <head>
        <title>Example of HTML Menu</title>
        <style type="text/css">
            #horizontalmenu ul {
                padding:1;
                margin:1;
                list-style:none;
            }

            #horizontalmenu li {
                float:left;
                position:relative;
                padding-right:100;
                display:block;
                border: 2px solid gray;
                border-style:inset;
               
            }

            #horizontalmenu li ul {
                display:none;
                position:absolute;
            }

            #horizontalmenu li:hover ul{
                display:block;
                background: rgb(220, 220, 220);
                height:auto;
                width:8em;
            }

            #horizontalmenu li ul li{
                clear:both;
                border-style:none;
            }
        </style>
        <script src="./jquery-1.9.1.min.js"></script>
        <script src="./helper.js"></script>
    </head>
   
    <body>
        <div id="horizontalmenu">
            <ul>
                <li>
                    <a href="./seite1.html">Menu1</a>
                    <ul>
                        <li><a href="#">U1</a></li>
                        <li><a href="#">U2</a>
                        </li> <li><a href="#">U3</a></li>
                        <li><a href="#">U4</a></li>
                    </ul>                
                </li>
               
                <li>
                    <a href="./seite2.html">Menu2</a>
                    <ul>
                        <li><a href="#">U5</a></li>
                        <li><a href="#">U6</a>
                        </li> <li><a href="#">U7</a></li>
                        <li><a href="#">U8</a></li>
                    </ul>
                </li>
                               
            </ul>
        </div>
    </body>
</html>

Javascript helper.js
Code: 
(function($, window, document) {
  $(function() {
   
    if (!('ontouchstart' in document.documentElement)) {

        var mainLinks = $('ul a');

        mainLinks.on({
            'click': function(e) {

                if(!$(this).hasClass('clicked')) {
                    $(this).addClass('clicked')
                    return false;
                } else {
                    return true;
                }
            }
        });
    }      
  });
 
}(window.jQuery, window, document));

Was man hier deutlich sieht, das beide Hauptlinks die Klasse "clicked" bekommen, wenn ich sie nacheinander anklicke.
Ich möchte aber nur auf Seite1.html kommen wenn ich direkt nach dem ersten klick, ein weiteres mal auf den selben Link klicke, nicht wenn ich in der Zwischenzeit auf einem anderen war.
 
Was man hier deutlich sieht, das beide Hauptlinks die Klasse "clicked" bekommen, wenn ich sie nacheinander anklicke.
Zum Vergrößern anklicken....

Ich hatte in meiner Antwort aber auch noch ein removeClass() eingebaut. Die erste Aktion sollte sein, von allen Elementen die Klasse .clicked zu entfernen, danach wird dem aktuellen Element die Klasse hinzugefügt.
 
Werbung:
Ich hatte es in der Zwischenzeit jetzt so gelöst:

Code: 
var mainLinks = $('ul a');

mainLinks.on({
     'click': function(e) {
         mainLinks.not(this).removeClass('clicked');
              
         if(!$(this).hasClass('clicked')) {
             $(this).addClass('clicked')
                 return false;
             } else {
                 return true;
             }
    }
});

Also schon mit removeClass nur eben nicht auf alle Links :)
Danke!
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben