Il menu a discesa di Twitter Bootstrap 2 non funziona

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

  •  27-10-2019
  •  | 
  •  

Domanda

Buona giornata! Sto cercando di implementare un menu a discesa dagli esempi sul mio sito.Ma non funziona (il menu a discesa non viene visualizzato affatto).Ho incluso tutti i file js e css necessari, il markup è lo stesso dei documenti.

Riesci a vedere cosa sto facendo di sbagliato? 

<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>

Molte grazie.

È stato utile?

Soluzione

Il problema era nel blocco js mancante nel file html, richiesto per una funzione specifica.

Il bit di codice mancante era: 

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

Altri suggerimenti

Non stai associando correttamente il tuo collegamento di navigazione principale al menu a discesa, prova questo: 

<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>

Demo: http://jsfiddle.net/u5vhS/1/

Di solito dimenticavo uno di questi:

  • HTML corretto
  • collegamento a jquery.js e bootstrap-dropdown.js
  • controllando se l'ho collegato correttamente (sembra ridondante ma sicuramente mi ha aiutato)
  • chiamando il menu a discesa: $ ('. dropdown-toggle'). dropdown ()

So che può sembrare sciocco, ma quando visualizzi la fonte (tramite clic con il pulsante destro del mouse), gli indirizzi dei file JavaScript sono corretti?È possibile che {{STATIC_URL}} non sia corretto.Prova a copiare e incollare gli indirizzi dall'origine nella barra degli indirizzi.Assicurati di vedere effettivamente il contenuto dei file JavaScript.

Stavo affrontando lo stesso problema.Commentando il collegamento per bootstrap-dropdown.js è stato risolto.Avevo solo bisogno di bootstrap.min.js

Ciò accadrà se sovrascrivi li da qualche parte nel tuo css.Ad esempio, se hai un altro foglio di stile con contenuto: 

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

Non funzionerà.Assicurati che non vi siano conflitti.

Prova ad aggiornare la tua libreria jQuery, ha risolto lo stesso problema per me.

Aveva lo stesso problema su un progetto .net (il menu a discesa non veniva visualizzato affatto), tuttavia i campioni di bootstrap ufficiali funzionavano bene.L'aggiornamento della libreria jQuery sul mio progetto da 1.6.1 a 1.8.2 ha risolto il problema.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top