Twitter Bootstrap 2 menu déroulant est un travail non

StackOverflow https://stackoverflow.com/questions/9334205

  •  27-10-2019
  •  | 
  •  

Question

Bonjour! Je suis en train de mettre en œuvre le menu déroulant des exemples sur mon site. Mais ce n'est pas le travail (menu déroulant ne montre pas du tout). Je tous inclus js et les fichiers nécessaires css, le balisage est le même que dans les documents.

Pouvez-vous voir ce que je fais mal? 

<link type="text/css" href="{{ STATIC_URL }}css/bootstrap.css" rel="stylesheet">

<script type="text/javascript" src="{{ STATIC_URL }}js/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/bootstrap-dropdown.js"></script>

...

<body>
<div class="navbar .navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="brand" href="/">
                Brand
            </a>

            <ul class="nav">
                <li class="dropdown">
                    <a href="#fat-menu" class="dropdown-toggle" data-toggle="dropdown">
                        Аккаунт
                        <b class="caret"></b>
                    </a>
                    <ul class="dropdown-menu" id="fat-menu">
                        <li><a>SubLink</a></li>
                        <li class="divider"></li>
                        <li><a>SubLink</a></li>
                    </ul>
                </li>
            </ul>

...


        </div>
    </div>
</div>

Merci.

Était-ce utile?

La solution

Le problème était dans le bloc manquant dans le fichier html, requis pour une fonction spécifique.

Le bit de code manquant était: 

$('.dropdown-toggle').dropdown()

Autres conseils

Vous n'êtes pas lier correctement votre principal lien de navigation à votre menu déroulant, essayez ceci: 

<ul class="nav">
    <li class="dropdown" id="fat-menu"> /* notice the reference to your dropdown link #fat-menu */
        <a href="#fat-menu" class="dropdown-toggle" data-toggle="dropdown">
            Аккаунт
            <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li><a>SubLink</a></li>
            <li class="divider"></li>
            <li><a>SubLink</a></li>
        </ul>
    </li>
</ul>

Démo: http://jsfiddle.net/u5vhS/1/

Je habituellement utilisé pour oublier l'un de ces:

  • bon html
  • un lien vers jquery.js et bootstrap-dropdown.js
  • vérifier si je reliaient correctement (il semble redondant, mais il m'a certainement aidé)
  • appeler le menu déroulant. $ ( '. Menu déroulant-bascule) menu déroulant ()

Je sais que cela peut sembler idiot, mais quand vous affichez la source (via clic droit), sont les adresses des fichiers JavaScript correct? Il est possible que {{STATIC_URL}} est incorrect. Essayez copier et coller les adresses de la source dans la barre d'adresse. Assurez-vous que vous voyez réellement le contenu des fichiers JavaScript.

I was facing the same problem. Commenting the link for bootstrap-dropdown.js resolved it. I only needed bootstrap.min.js

That will happen if you override li somewhere in your css. For example, if you have an other stylesheet with content:

li {
    list-style: none;
    margin-bottom: 20px;
    overflow: hidden;
    padding-bottom: 25px;
    position: relative;
}

It will not work. Make sure there is no conflict.

Try to upgrade your jQuery library, it solved the same problem for me.

Had the same issue on a .net project (drop down menu not showing at all), however offcial bootstrap samples worked fine. Upgrading jQuery library on my project from 1.6.1 to 1.8.2 solved the problem.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top