Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Menu dropdown não expande.

Olá,

O meu menu dropdown não expande, segue o código:

<!DOCTYPE html>
<html>
<head>
    <title>Loja Virtual</title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.min.css">
    <meta name="viewport" content="width=device-width" />
    <style>
        .navbar-header button {
            color:#fff;
    }
    .fullscreen {
        width: 100%;
    }
    main {
        padding-top: 50px;
    }
    </style>
</head>
<body>
    <header>
        <nav class="navbar navbar-fixed-top navbar-inverse">
            <div class="container">
                <div class="navbar-header">
                    <a href="#" class="navbar-brand">Caelum</a>
                    <button class="navbar navbar-toggle" type="button" data-target=".navbar-collapse"data-toggle="collapse">Menu</button>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="navbar-nav nav">
                        <li><a href="#">Novidades</a></li>
                        <li><a href="#">Mais Vendidos</a></li>
                        <li class="dropdown">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Camisetas<span class="caret"></span>
                              </a>
                              <ul class="dropdown-menu">
                                <li><a href="#">Masculino</a></li>
                                <li><a href="#">Feminina</a></li>
                                <li><a href="#">Infantil</a></li>
                              </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>
    <main>
        <div class="conteiner-fluid"></div>
            <div class="row">
                <div id="carousel" class="carousel slide" data-ride="carousel">
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="img/banner1.jpg" alt="Moda" class="fullscreen">    
                        </div>
                        <div class="item">
                            <img src="img/banner2.jpg" alt="Moda Infantil" class="fullscreen">     
                        </div>
                    </div>
                    <a href="#carousel" role="button" data-slide="prev" class="left carousel-control">
                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                    </a>
                    <a href="#carousel" role="button" data-slide="next" class="right carousel-control">
                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                    </a>
                </div>
            </div>
        <div>
            <h3 class="text-center">Novidades</h3>
        </div>

        <div class="col-xs-12 col-md-4 thumbnail text-center">
            <figure>

                <img src="img/camisa-azul.png" alt="Camisa Azul Importada" />

                <div>
                    <h4>Camisa Azul Importada</h4>
                    <p>Camisa Azul importada com um preço acessível e com pano de qualidade</p>
                </div>

            </figure>
                <p>R$ 190,00</p>
                <a href="#" class="btn btn-primary">Comprar </a>            
        </div>

        <div class="col-xs-12 col-md-4 thumbnail text-center">
            <figure>

                <img src="img/camisa-rosa.png" alt="Camisa Azul Importada" />

                <div>
                    <h4>Camisa Rosa Argentina</h4>
                    <p>Camisa Rosa da Argentina com um preço acessível e com pano de qualidade</p>
                </div>

            </figure>
                <p>R$ 210,00</p>
                <a href="#" class="btn btn-primary">Comprar </a>            
        </div>

        <div class="col-xs-12 col-md-4 thumbnail text-center">
            <figure>

                <img src="img/camisa-azul.png" alt="Camisa Azul Importada" />

                <div>
                    <h4>Camisa Azul nacional</h4>
                    <p>Camisa Azul nacional com um preço acessível ebonita</p>
                </div>

            </figure>
                <p>R$ 80,00</p>
                <a href="#" class="btn btn-primary">Comprar </a>            
        </div>
    </main>
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="http://code.jquery.com/jquery.min.js"></script>
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> -->
    <!-- <script src='http://code.jquery.com/jquery-2.1.3.min.js'></script> -->

    <script src="bootstrap/js/bootstrap.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
2 respostas

Olá Wagner! Testei seu código aqui e ele funcionou normalmente. Verifique se a referencia aos arquivos jQuery e JavaScript de seu código estão corretos.

solução!

Olá, Verifiquei a referencia dos arquivos e estão corretos.

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

O problema ocorre quando clico em Camisetas, ele deveria expandir para visualizar as opções do submenu: Masculino, Feminina, Infantil, mas não exibe ação nenhuma.