Stop Karussell auf Menü klicken

Ich habe ein Bootstrap "Hamburger" -Menü und ein Bootstrap Karussell. Das Karussell-Gleiten ist sehr störend, sobald der Benutzer auf das "Hamburger" -Menü klickt und eine Liste nach unten springen lässt.Stop Karussell auf Menü klicken

Ich weiß, dass <div id="myCarousel" class="carousel slide" data-interval="false data-ride="carousel"> das Karussell stoppen würde. Ich versuche dies zu erreichen, wenn der Benutzer auf das "Hamburger" -Menü klickt.

Ich dachte, dass ich eine jQuery click() Funktion muss ausgeführt werden, wenn das „Hamburger-Menü“ wie so geklickt wird:

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    $(".navbar-toggle collapsed").click(function(){ 
     alert("Clicked."); 
    }); 
}); 
</script> 
</head> 
<body> 


<nav class="navbar" id="skew"> 
     <div class="navbar-header"> 
     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar" id="slider-nav"></span> 
     <span class="icon-bar" id="slider-nav"></span> 
     <span class="icon-bar" id="slider-nav"></span> 
     </button> 
    </div>  
    <div class="collapse navbar-collapse" id="navbar-collapse-2"> 
     <ul class="nav navbar-nav navbar-right" id="second-navbar"> 
     <li><a href="/about/">ABOUT</a></li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </nav> 


</body> 
</html>

Doch dieser Klick nicht funktioniert, da ich nicht eine Warnmeldung empfangen werde. Ich bin neu in jQuery, also verstehe ich nicht, was falsch ist.

Hier kann ich das Karussell stoppen, wenn die Seite geladen wird:

<script> 
$(document).ready(function(){ 
     $('#myCarousel').carousel({ 
     pause: true, 
      interval: false 
     }); 

}); 
</script>

Irgendwelche Vorschläge hinsichtlich, wie ich das Klicken verbinden sollte und Anhalten des Karussells zu stoppen, wenn das „Hamburger“ Menü angeklickt wird geschätzt werden.

--update: --- Typing die ganze Klasse ohne die folgenden erlaubt Räume und es funktionierte:

$(".navbar-toggle.collapsed").click(function(){ 
    alert("Clicked."); 
});

Nun pro meine ursprüngliche Frage, ich bin versucht, das Karussell zu stoppen rutscht wenn der Benutzer auf die Hamburgermenü-Schaltfläche klickt.

Ich war so etwas wie dieses Denken:

$(".navbar-toggle.collapsed").click(function(){ 
    alert("Clicked."); 
$('#myCarousel').carousel({ 
     pause: true, 
      interval: false 
     }); 
});

die nicht korrekt angezeigt wird. Irgendwelche Vorschläge werden geschätzt.

Quelle

2016-08-24 SamSmith

Ich glaube nicht, dass Sie auswählen, was Sie denken, mit denen Sie auswählen: '$ (". Navbar-toggle collapsed ")' – DBS

Ihr Update funktioniert möglicherweise nicht, weil ich nicht in der HTML, das Sie ein Element mit 'id =" myCarousel "' – Adjit

@Adjit geschrieben haben Ich habe den Karussell-Code der Einfachheit halber nicht aufgenommen. Ich habe ein Karussell mit dieser ID in meinem Code; doppelt geprüft. Trotzdem danke. – SamSmith

direkt an den Anfang zurück, was Sie zuerst tun, ist das Element auswählen und Hinzufügen der Click-Methode hier. Der document.ready-Teil wartet nur darauf, dass die Seite vollständig geladen wird. Zusammenfügen .navbar-toggle.collapsed wartet auf das Hinzufügen des Klicks zum Element, wenn es minimiert wird.

Also jetzt haben wir das gemacht, wir müssen mit dem Karussell spielen und es zum Stillstand bringen. Also schauen wir uns die Dokumentation an.

Wir haben eine Funktion .carousel('pause'), die wir verwenden können. Vom Aussehen der Dinge müssen Sie es auch starten.So also $('#myCarousel').carousel()

und das fertige Produkt ....

$(document).ready(function(){ 

    $('#myCarousel').carousel(); 

    $(".navbar-toggle.collapsed").click(function(){ 
     $('#myCarousel').carousel('pause'); 
    }); 
});

Ich hoffe, das hilft und bringen Sie mit jquery gestartet - was zu ihrer Information, dass und Bootstrap sind hervorragende Tools auf seiner Seite zu haben.

Quelle

2016-08-24 15:44:56

Schön du hast es funktioniert und ich habe es richtig gemacht! –

Vielen Dank für Ihre höfliche und detaillierte Antwort. Ich habe es funktioniert. Ich freue mich darauf, mit jQuery weiterzumachen. Der von Ihnen zur Verfügung gestellte Karussell-Link ist sehr hilfreich. – SamSmith

Keine Requisiten, es ist schön, nett zu sein und Menschen wie dich selbst bei den ersten Schritten mit jQuery zu helfen. –

Es sieht so aus, als ob Sie ein '.' aus dem collapsed Selektor, so dass JQuery seine Klasse kennt.

$(document).ready(function(){ 
    $(".navbar-toggle.collapsed").click(function(){ 
     alert("Clicked."); 
    }); 
});

Quelle

2016-08-24 15:21:29 Greg

Ich habe den Klassenselektor hinzugefügt, aber wenn ich auf das Menü klicke, um es zu erweitern, erhalte ich keine Warnmeldung. – SamSmith

Versuchen Sie '$ (". Navbar-toggle.collapsed ")'. Beachten Sie, dass das Leerzeichen entfernt wird, da sich die Klassen auf demselben Element befinden. – Greg

Ihr Vorschlag zum Verschieben des Klassenselektors hat funktioniert. Vielen Dank. Das war der erste Teil der Frage. Bitte beachten Sie das Update. – SamSmith

Ich glaube, Sie wollen etwas näher an:

$(".navbar-toggle.collapsed").click(function(){ 
    alert("Clicked."); 
});

.navbar-toggle.collapsed mit irgendeinem Element auswählen, wird sowohl der „navbar-Toggle“ und „kollabiert“ Klassen (Unter der Annahme, dass die Taste, um die .collapsed Klasse an die Zeit des Klickens)

Quelle

2016-08-24 15:24:19 DBS

Ich habe den Klassenselektor hinzugefügt und die Dokumentbereitschaftsfunktion entfernt, aber wenn ich auf das Menü klicke, um es zu erweitern, erhalte ich keine Warnmeldung. Und oh ... die Schaltfläche hat einen 'navbar-collapse'-Einbruch zum Zeitpunkt des Klickens, also muss ich das anpassen. – SamSmith

@SamSmith Können Sie überprüfen, ob die '.collapsed'-Klasse vorhanden ist, bevor auf das Element geklickt wird? Wenn nicht, entfernen Sie einfach den '.collapsed' vollständig und sehen, ob das funktioniert. – DBS

-1

OMG! Das ist ruhig einfach. Tun Sie dies einfach:

Quelle

2016-08-24 15:31:06 SimonSolutions

Was bedeutet '$ (" script "). Remove();' beziehen sich auf? Ich bin neu in jQuery ... – SamSmith

Es entfernt jedes Skript, was das Karussell bewegt. – SimonSolutions

Diese Lösung funktioniert nicht für mich, da das Karussell immer noch über den Menüklick gleitet. – SamSmith

Stop Karussell auf Menü klicken

Antwort

Verwandte Themen