Verwenden Sie intro.js für das Bootstrap-Dropdown-Element

Ich kann nicht herausfinden, wie man intro.js für Dropdown-Elemente verwendet.

Ich habe dort eine ähnliche Frage ohne Antwort gefunden: IntroJS Bootstrap Menu doest work

Wenn Sie den Fehler reproduzieren möchten, gehen Sie folgendermaßen vor:

http://recherche.utilitaire.melard.fr/#/carto

Sie müssen auf “Hilfe” klicken (Der grüne Knopf oben rechts), das Problem tritt für den zweiten Schritt auf. Beim Änderungsereignis mache ich Folgendes:

$scope.ChangeEvent = function (e) { 
    if (e.id === 'step2') {
        document.getElementById('step1').click();
    } 
    console.log("Change Event called"); 
};

Beim Debuggen funktioniert alles wie am Schnürchen, bis diese Funktion endet: _showElement Danach verliere ich mich in JQuery-Ereignissen und das Dropdown-Menü wird geschlossen …

Wenn Sie reproduzieren möchten, fügen Sie einfach einen Haltepunkt am Ende der _showElement-Funktion hinzu und Sie werden verstehen, was ich meine …

Hier eine klarere Lösung

 function startIntro(){
    var intro = introJs();
      intro.setOptions({
        steps: [
          {
            element: "#mydropdown",
            intro: "This is a dropdown"
          },
          {
            element: '#mydropdownoption',
            intro: "This is an option within a dropdown.",
            position: 'bottom'
          },

        ]
      });

      intro.onbeforechange(function(element) {
        if (this._currentStep === 1) {
          setTimeout(function() {
            $("#mydropdown").addClass("open");
          });
        }
      });
      intro.start();
  };

  $(document).ready(function() {
    setTimeout(startIntro,1500);
  });

Beachten Sie, dass setTimeout ohne zweites Argument (Millisekunden) es Ihnen ermöglicht, die Funktion in der Ereignisschleife in die Warteschlange zu stellen und sie auszuführen, nachdem alle Ereignisse verarbeitet wurden (einschließlich des Klicks, der die Dropdown-Liste schließt). Außerdem ist es besser, die Klasse open zur Dropdown-Liste hinzuzufügen, wenn Sie möchten es in den offenen Zustand versetzen

In Ihrer Vorlage dh in

/views/nav/body-create.html

Sie haben einen Code, bei dem ng-disabled auf !currentPath.name basiert. Und der Wert von currentPath.name ist null. Versuchen Sie, den Wert des folgenden Elements zu überprüfen. Sie werden sehen, dass es null ist.

<button class="dropdown-toggle btn btn-sm btn-default no-radius" ng-disabled="!currentPath.name">
                Niveau{{currentPath.level?": "+currentPath.level:""}} <strong><b class="caret"></b>
                                                          </strong>
</button>

Stellen Sie sicher, dass Sie den richtigen Namen haben oder verwenden Sie eine andere Bedingung – ich bin mir nicht sicher, was Sie mit der Bedingung machen wollen.

Beweis: Untersuchen Sie das obige Element in Ihrem Chrome-Debugger recherche.utilitaire.melard.fr/#/carto Verknüpfung. Geben Sie Folgendes in die Konsole ein und drücken Sie die Eingabetaste.

$scope.currentPath.name="Hello You";

Und Ihr “Niveau”-Menü beginnt zu funktionieren.

Ich habe eine Problemumgehung gefunden, es ist ziemlich hässlich, aber macht den Job:

$scope.ChangeEvent = function (e) { 
    if (e.id === 'step2') {
        document.getElementById('step1').click();
        setTimeout(function () {
            document.getElementById('step2').style.display = 'block';
        }, 500);
    } 
    console.log("Change Event called"); 
};

Ich habe das Anzeigeattribut so eingestellt, dass es direkt nach dem Klickereignis, das ich im Änderungsereignis hinzugefügt habe, blockiert wird

Beim Ausführen des Klicks auf das Element 1 ist mir aufgefallen, dass jquery den Zustand der style.display des Elements 2 auf ” gesetzt hat, also warte ich nach dem Klicken etwas, um es wieder auf ‘blockieren’ zu setzen, ich weiß es ist hässlich, aber ich habe damals nichts besseres gefunden

Dies geschieht aufgrund der festen Position. Ändern Sie mithilfe von CSS die Position für das übergeordnete Element von fest auf absolut und es funktioniert perfekt. Zum Beispiel: Position von .Seitenleiste fest ist, lass es so. Position wechseln für .sidebar.introjs-fixParent zu absolut.

Hoffe es hilft dir