JavaScript Bootstrap 3 - Navbar Collapse jQuery Probleme

raven16

Lieutenant
Registriert
Nov. 2008
Beiträge
580
Hallo,

ich benutze Twitter-Bootstrap als Framework in Kombination mit Wordpress.
In der XS-Ansicht funktioniert jedoch bisher das Toggeln des Hauptmenüs nicht.

Hatte das auf einer anderen Internetseite schon einmal gemacht und das funktionierte dort wunderbar. Daher hatte ich den Code weitgehend übernommen, mit der Ausnahme, dass ich nun evtl eine neuere Bootstrap-Version benutze.

Hier der Quellcode:

Header
PHP:
<head>
<!-- [...] Hier sind die ganzen Meta's und das <title> Tag und danach einbinden der stylesheets -->

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<?php wp_head(); ?>
<!-- [...] Hier ist noch ein anderes nicht relevantes Script -->
</head>

Content
PHP:
<body>
	<div class="container-fluid business-blue visible-xs">
		<div class="row">
			<button class="navbar-toggle float-left margin-none" data-toggle="collapse" data-target="#mainmenu-collapse">
				<span class="icon-bar white"></span>
				<span class="icon-bar white"></span>
				<span class="icon-bar white"></span>
			</button>
		</div>
	</div>
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12 visible-xs">
				<div class="collapse navbar-collapse" id="mainmenu-collapse">
					<ul class="nav nav-pills nav-stacked">
						<li class="active"><a href="#">Link 1</a></li>
						<li><a href="#">Link 2</a></li>
						<li><a href="#">Link 3</a></li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!-- [...] Hier folgt der Rest des Bodys bis zum Footer -->

Footer
PHP:
	<?php wp_footer(); ?>
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="js/bootstrap.min.js"></script>
</body>

Der grundlegende Aufbau des Codes ist im Prinzip von Bootstrap kopiert.

Das Toggeln der Navbar ist hier erklärt.

Ich habe auch schon ausprobiert, jQuery noch nachträglich, wie hier beschrieben, zu importieren...

Langsam bin ich etwas ratlos diesbezüglich, wo mein Fehler liegt.

MfG
Ergänzung ()

Hab das Problem jetzt doch noch selbst gefunden nach gefühlt einer Ewigkeit.
Das grundlegende Wordpress-Funktionsprinzip war in dieser Hinsicht Schuld und führte dazu, dass beim Laden der Seite nicht auf die bootstrap.min.js zugegriffen werden konnte.

Die Änderung im Footer sollte deshalb beachtet werden.
PHP:
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="<?php bloginfo('template_directory'); ?>/js/bootstrap.min.js"></script>

Gruß
 

Ähnliche Themen

Antworten
8
Aufrufe
715
Antworten
8
Aufrufe
854
Antworten
19
Aufrufe
1.211
Antworten
2
Aufrufe
1.280
Zurück
Oben