Zum Inhalt springen

Bootstraop Dropdown funktioniert nicht

Erstellt am 7. Mai 2015 · 6 Antworten · letzte Antwort am 9. August 2015

Tags: Bootstrap, JavaScript & AJAX, Frage

nullstein ·

Liebe Kollegen,

ich hab ein Problem mit meiner Typo3-Navigation.

Das ist mein TypoScript:

lib.menu = HMENU
lib.menu {

    1 = TMENU
    1 {
        expAll = 1

        NO.allWrap = <li>|</li>
        NO.ATagTitle.field = abstract // description // title

        ACT = 1
        ACT.wrapItemAndSub = <li class="active">|</li>
        ACT.ATagTitle.field = abstract // description // title

        IFSUB = 1
        IFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
        IFSUB.after = <b class="caret"></b></a>
        IFSUB.doNotLinkIt = 1
        IFSUB.wrapItemAndSub = <li class="dropdown">|</li>
        IFSUB.ATagTitle.field = abstract // description // title

        ACTIFSUB = 1
        ACTIFSUB.before = <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
        ACTIFSUB.after = <b class="caret"></b></a>
        ACTIFSUB.doNotLinkIt = 1
        ACTIFSUB.wrapItemAndSub = <li class="dropdown active">|</li>
        ACTIFSUB.ATagTitle.field = abstract // description // title

        wrap = <ul class="nav navbar-nav navbar-left"> | </ul>
    }

    2 = TMENU
    2 {
        expAll = 1

        ACT = 1
        ACT.wrapItemAndSub = <li class="active">|</li>
        ACT.ATagTitle.field = abstract // description // title

        ACTIFSUB = 1
        ACTIFSUB.wrapItemAndSub = |
        ACTIFSUB.before = <li class="divider"></li><li class="nav-header">
        ACTIFSUB.after = </li>
        ACTIFSUB.doNotLinkIt = 1
        ACTIFSUB.ATagTitle.field = abstract // description // title

        NO.allWrap = <li>|</li>
        NO.ATagTitle.field = abstract // description // title

        IFSUB = 1
        IFSUB.before = <li class="divider"></li><li class="nav-header">
        IFSUB.after = </li>
        IFSUB.doNotLinkIt = 1
        IFSUB.ATagTitle.field = abstract // description // title

        SPC = 1
        SPC.allWrap = <li class="divider"></li><li class="nav-header">|</li>

        wrap = <ul class="dropdown-menu" role="menu">|</ul>
    }

    3 = TMENU
    3 {
        NO.allWrap = <li>|</li>
        NO.ATagTitle.field = abstract // description // title

        ACT = 1
        ACT.wrapItemAndSub = <li class="active">|</li>
        ACT.ATagTitle.field = abstract // description // title
    }
}

Meine index.html:

<div class="container">
    <!-- Static navbar -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <f:if condition="{f:cObject(typoscriptObjectPath:'lib.menu')}">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                </f:if>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <f:cObject typoscriptObjectPath="lib.menu" />
            </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
    </nav>
</div> <!-- /container -->

Die Ausgabe funktioniert auch grundsätzlich:

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<!-- 
	This website is powered by TYPO3 - inspiring people to share!
	TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
	TYPO3 is copyright 1998-2015 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
	Information and contribution at http://typo3.org/
-->



<title>Startseite</title>
<meta name="generator" content="TYPO3 CMS 6.2">


<link rel="stylesheet" type="text/css" href="typo3temp/stylesheet_b2f9d200e6.css?1430732481" media="all">
<link rel="stylesheet" type="text/css" href="typo3conf/ext/tc_mp_distribution_tsg/Resources/Public/Bootstrap/bootstrap-3_3_4-dist/css/bootstrap.min.css?1430748767" media="all">
<link rel="stylesheet" type="text/css" href="typo3conf/ext/tc_mp_distribution_tsg/Resources/Public/Bootstrap/bootstrap-3_3_4-dist/css/bootstrap-theme.min.css?1430748767" media="all">
<link rel="stylesheet" type="text/css" href="typo3conf/ext/tc_mp_distribution_tsg/Resources/Public/Css/custom.css?1430749266" media="all">


<script src="uploads/tx_t3jquery/jquery-1.8.x-1.9.x.js?1430728458" type="text/javascript"></script>
<script src="typo3conf/ext/tc_mp_distribution_tsg/Resources/Public/Bootstrap/bootstrap-3_3_4-dist/js/bootstrap.min.js?1430748767" type="text/javascript"></script>



</head>
<body>
<div class="container">
        <a href="/home.html"><img class="img-responsive" alt="Alternativ text" src="typo3conf/ext/tc_mp_distribution_tsg/Resources/Public/Images/header.png" width="1600" height="400" /></a>
</div> <!-- /container -->
<div class="container">
    <!-- Static navbar -->
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                
            </div>
            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-left"><li class="active"><a href="index.php?id=2" title="Startseite">Startseite</a></li><li><a href="index.php?id=3" title="Aktuelles">Aktuelles</a></li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Mannschaften<b class="caret"></b></a><ul class="dropdown-menu"><li><a href="index.php?id=8" title="Damen 1 (DL)">Damen 1 (DL)</a></li><li><a href="index.php?id=9" title="Herren 1 (LL)">Herren 1 (LL)</a></li><li><a href="index.php?id=10" title="Damen 2 (OL)">Damen 2 (OL)</a></li><li><a href="index.php?id=11" title="Herren 2 (VL)">Herren 2 (VL)</a></li><li><a href="index.php?id=12" title="Damen 3 (BL)">Damen 3 (BL)</a></li><li><a href="index.php?id=13" title="Jugend">Jugend</a></li><li><a href="index.php?id=14" title="Freizeit">Freizeit</a></li><li><a href="index.php?id=15" title="Oldies">Oldies</a></li><li><a href="index.php?id=16" title="SeniorInnen">SeniorInnen</a></li></ul></li><li><a href="index.php?id=5" title="Downloads">Downloads</a></li><li><a href="index.php?id=6" title="Sponsoren">Sponsoren</a></li><li><a href="index.php?id=7" title="Vorstand">Vorstand</a></li><li><a href="index.php?id=19" title="Service">Service</a></li></ul>
            </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
    </nav>
</div> <!-- /container -->

Leider funktioniert das Dropdown von Bootstrap (Vorlage z.B. diese hier: http://getbootstrap.com/examples/navbar/) in meiner Distribution nicht. Was mach ich falsch?

Beste Grüße
nullstein

nullstein ·

Hi Jörg,

das Dropdown in der Navigationsleiste expandiert nicht, sprich, es wird zwar das Caret dargestellt, aber bei Klick darauf klappt nichts nach unten. Die Untermenü-Punkte werden aber im HTML zumindest ausgegeben, also werden die Navigationspunkte für das Submenu zumindest erkannt und auch gerendert.

BG
nullstein

JPassmann ·

Hallo nullstein,

ich vermute fast, Du hast das gleiche Problem wie ich bis gestern hatte. Und zwar stimmte bei mir die HTML-Ausgabe 1:1 mit dem was das Bootstrap-Template vorgegeben hat. Prüf doch nochmal das Javascript.

VG
Jörg

nullstein ·

Hmm... aber in Spalte 25 und 26 werden zumindestz jquery und boootstrap.min.js geladen... das macht die Sache ja (noch) komischer...

nullstein ·

Prüf doch nochmal das Javascript.

Der Tipp war trotz allem Gold wert. Es war die falsche (zu alte jquery) Version eingebunden - daher wude zwar alles richtig geladen, kam aber nicht an.

BG
nullstein

JPassmann ·

Klasse, das es doch noch funktioniert hat. Bei mir habe ich z. B. auch einmal das aktualisierte Bootstrap-Template eingespielt und schwuppt sind direkt drei Fehlerchen verschwunden.