Freitag, Juni 5, 2020

jQuery: Stop-dropdown-Menü, das zusammenbricht, wenn ein Klick auf seine Kinder

Habe ich ein top-nav-bar und einige Ihrer Elemente trigger-dropdowns/slide-downs.

Mein problem ist, dass wenn ich auf ein Element klicken, oder eigentlich jedem Bereich innerhalb der dropdown-Liste die dropdown zusammenbricht.

Was ich benötige Hilfe ist, herauszufinden, wie zu vermeiden, kollabiert die dropdown-wenn ein Kind-element angeklickt wird (oder auch, überall in der dropdown-Bereich, da möchte ich Konto für versehentliche Klicks innerhalb der dropdown-aber das sind nicht wirklich die Klicks auf ein child-element).

Hier ist die grundlegende HTML Struktur, die ich habe:

<ul class="dropdown">
 <li><a href="#" class="noclick nojs">Select your Topic</a>
  <ul class="nojs" >
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
 </li>
</ul>

Meine JavaScript:

$('.dropdown li').click(function() {
  //Hide all other drop downs that are visible, and remove the class 'selected'
  $(this).siblings('.selected').removeClass('selected').find('ul:visible').slideUp('fast');

  //Show/Hide dropdowns
  $(this).toggleClass('selected');
  $('ul:first', this).stop(true, true).slideToggle('fast');
});

Hier ein DEMO

Jede Hilfe wird sehr geschätzt.

Dank.

InformationsquelleAutor Ricardo Zea | 2012-11-12

4 Kommentare

  1. 7

    stop event.stopPropagation() auf die Kinder-Elemente, so dass die Veranstaltung nicht Blase bis zu den li

    $('ul.nojs *').click(function(e){
       e.stopPropagation(); 
    });​

    http://jsfiddle.net/DEfK9/

    • Ok stopPropagation();, jetzt habe ich endlich verstehen, was es bedeutet :), man kann sagen ich bin das neue jQuery. Ich habe nicht zu ändern, meine aktuelle Skript, das ist toll. Es funktionierte perfekt wirey, vielen Dank.
  2. 1

    DEMO — Befestigen Sie die .click() event zu den <a> – tags anstelle der <li> tags.

    $('.dropdown .noclick').click(function(e) {
        //Do stuff.
    });
    • Coby, tolle Idee. Obwohl ich nicht wählen Sie Ihre Antwort als Letzte Antwort, Sie haben mir gezeigt, mit Ihrem Beispiel, wie man diesen Ansatz weiter Zeit. Vielen Dank für Ihre Hilfe. Gab dir ein upvote.
  3. 0

    Könnte man einfach ändern slideToggle() um slideDown() mit snippet unter:

    http://jsfiddle.net/yrzRu/

    if ($(this).not('.selected')) {
            $('ul:first', this).stop(true, true).slideDown('fast');
            $(this).addClass('selected');
        }
    • dein Beispiel jetzt ist es nicht möglich Zusammenbruch der dropdowns. Trotzdem danke.
  4. 0

    Hier gehen Sie!

    GEIGE

    $('.dropdown').children('li').click(function() {
    
        //Show clicked dropdown and add 'selected' class
        $(this).addClass('selected').find('ul').slideToggle('fast');
    
        //Hide all other dropdowns and remove 'selected' class
        $('.dropdown').children('li').not(this).removeClass('selected').find('ul').slideUp('fast');
    
    });
    • Gleiche problem wie mit gerösteten s, jetzt ist es nicht möglich, reduzieren Sie das Aufklappmenü durch anklicken der Elemente selbst. Danke tho.
    • Ohhhh, ich wusste nicht, Sie wollte, dass!
    • Hier gehen Sie! Statt slideDown , verwenden wir slideToggle 🙂 jsfiddle.net/videsignz/zEQVK/7
    • Sie sollten mindestens upvote Antworten, die funktioniert, da Sie nicht angegeben haben, in Ihrer Frage, dass Sie in der Lage sein wollten, um das Menü zu schließen.
    • Ich habe, und ich immer upvote Antworten, die es verdient haben. Auch habe ich nicht angeben, auf meine Frage, dass die dropdowns sollten kollabieren beim Klick auf das Element selbst, weil ich nicht brauchen Hilfe, denn ich hatte es bereits funktioniert. Auf der anderen Seite, dein Beispiel funktioniert immer noch nicht richtig, die dropdowns nicht kollabieren, wenn Sie auf den Artikel selbst. Ich lasse einen link auf der Geige mit dieser Frage verweisen: jsfiddle.net/videsignz/zEQVK/7. Danke.
    • Ahhh.. es ist alles gut, ich denke, es war nur ein wenig Verwirrung. Die Geige ist das falsche revision. Das Recht hat man die slideToggle wie in meiner obigen Antwort revision. jsfiddle.net/videsignz/zEQVK/10
    • Kein problem. Ihre Letzte Geige jedoch (rv10), hat das gleiche Problem hatte ich zunächst: dropdowns Zusammenbruch beim klicken auf die Elemente innerhalb von Ihnen. Verweis: jsfiddle.net/videsignz/zEQVK/10 – trotzdem Danke.

Kostenlose Online-Tests