2

Estou estudando bootstrap. precisamente, um menu. e fiquei confuso porque não esta repetindo o dropdown novamente. Porém so em 1 "LI" especifico.

Obrigado!

CSS

HTML:

<div id="sidebar-nav" class="sidebar">
        <div class="sidebar-scroll">
            <nav>
                <ul class="nav">
                    <li><a href="index.html" class="active"><i class="lnr lnr-home"></i> <span>Página Inicial</span></a></li>
                    <!--FUNCIONA PERFEITAMENTE ABAIXO -->
                    <li>
                        <a href="#subPages" data-toggle="collapse" class="collapsed"><i class="lnr lnr-file-empty"></i> <span>Cadastrar</span> <i class="icon-submenu lnr lnr-chevron-left"></i></a>
                        <div id="subPages" class="collapse">
                            <ul class="nav">
                                <li><a href="page-profile.html" class="">Cliente</a></li>
                                <li><a href="page-lockscreen.html" class="">Corretor</a></li>
                                                                    <li><a href="page-login.html" class="">Moto</a></li>

                            </ul>
                        </div>
                    </li>

                    <li><a href="charts.html" class=""><i class="lnr lnr-chart-bars"></i> <span>Charts</span></a></li>

                    <li><a href="panels.html" class=""><i class="lnr lnr-cog"></i> <span>Panels</span></a></li>
                    <li><a href="notifications.html" class=""><i class="lnr lnr-alarm"></i> <span>Notifications</span></a></li>
                    <!--QUANDO CLICA ESTA ABRINDO O PRIMEIRO DROPDOWN E NAO ESTE! -->
                                            <li>
                        <a href="#subPages" data-toggle="collapse" class="collapsed"><i class="lnr lnr-file-empty"></i> <span>Cadastrar</span> <i class="icon-submenu lnr lnr-chevron-left"></i></a>
                        <div id="subPages" class="collapse">
                            <ul class="nav">
                                <li><a href="page-profile.html" class="">Cliente</a></li>
                                <li><a href="page-lockscreen.html" class="">Corretor</a></li>
                                                                    <li><a href="page-login.html" class="">Moto</a></li>

                            </ul>
                        </div>
                    </li>
                    <li><a href="tables.html" class=""><i class="lnr lnr-dice"></i> <span>Tables</span></a></li>
                    <li><a href="typography.html" class=""><i class="lnr lnr-text-format"></i> <span>Typography</span></a></li>
                    <li><a href="icons.html" class=""><i class="lnr lnr-linearicons"></i> <span>Icons</span></a></li>
                </ul>
            </nav>
        </div>
    </div>

CSS: https://pastecode.xyz/view/f8aaee66

4
  • Boa noite especifique mais a sua pergunta por favor.
    – Dudut
    Commented 18/06/2018 às 22:09
  • O codigo abaixo do comentario serve para criar um drop down. De fato na primeira vez do codigo abaixo do comentario funciona. más se eu repetir ele abre o de cima e não o de baixo(drop down) Commented 18/06/2018 às 22:27
  • Vc está usando o mesmo id em ambos.
    – Sam
    Commented 18/06/2018 às 22:36
  • Não é um conflito com os ID's?
    – Dudut
    Commented 18/06/2018 às 22:37

1 Resposta 1

1

Não é um conflito de ID's? tente usar o seguinte código.

<div id="sidebar-nav" class="sidebar">
    <div class="sidebar-scroll">
        <nav>
            <ul class="nav">
                <li><a href="index.html" class="active"><i class="lnr lnr-home"></i> <span>Página Inicial</span></a></li>
                <!--FUNCIONA PERFEITAMENTE ABAIXO -->
                <li>
                    <a href="#subPages" data-toggle="collapse" class="collapsed"><i class="lnr lnr-file-empty"></i> <span>Cadastrar</span> <i class="icon-submenu lnr lnr-chevron-left"></i></a>
                    <div id="subPages" class="collapse">
                        <ul class="nav">
                            <li><a href="page-profile.html" class="">Cliente</a></li>
                            <li><a href="page-lockscreen.html" class="">Corretor</a></li>
                                                                <li><a href="page-login.html" class="">Moto</a></li>

                        </ul>
                    </div>
                </li>

                <li><a href="charts.html" class=""><i class="lnr lnr-chart-bars"></i> <span>Charts</span></a></li>

                <li><a href="panels.html" class=""><i class="lnr lnr-cog"></i> <span>Panels</span></a></li>
                <li><a href="notifications.html" class=""><i class="lnr lnr-alarm"></i> <span>Notifications</span></a></li>
                <!--QUANDO CLICA ESTA ABRINDO O PRIMEIRO DROPDOWN E NAO ESTE! -->
                                        <li>
                    <a href="#subPages2" data-toggle="collapse" class="collapsed"><i class="lnr lnr-file-empty"></i> <span>Cadastrar</span> <i class="icon-submenu lnr lnr-chevron-left"></i></a>
                    <div id="subPages2" class="collapse">
                        <ul class="nav">
                            <li><a href="page-profile.html" class="">Cliente</a></li>
                            <li><a href="page-lockscreen.html" class="">Corretor</a></li>
                                                                <li><a href="page-login.html" class="">Moto</a></li>

                        </ul>
                    </div>
                </li>
                <li><a href="tables.html" class=""><i class="lnr lnr-dice"></i> <span>Tables</span></a></li>
                <li><a href="typography.html" class=""><i class="lnr lnr-text-format"></i> <span>Typography</span></a></li>
                <li><a href="icons.html" class=""><i class="lnr lnr-linearicons"></i> <span>Icons</span></a></li>
            </ul>
        </nav>
    </div>
</div>

Como pode ver eu apenas alterei o ID da primeira DIV, lembre-se no HTML ID é único e cada elemento deve possuir um diferente caso contrário pode ocorrer conflitos, estou a disposição.

3
  • obrigado por responder pessoal! também pensei que era o ID. fiz a troca. mesmo assim permanece. digamos que eu coloquei o #subPages2. mesmo assim o #subPages é chamado. Commented 18/06/2018 às 22:42
  • HAHAHHAHAH QUE ERRO GROTESCO. FALTOU EU ALTERAR O ID DO DE BAIXO.<div id="subPages2" class="collapse"> VALEU POVO! Commented 18/06/2018 às 22:43
  • Já que minha resposta te ajudou ,você poderia dar um voto a favor na resposta para me ajudar?
    – Dudut
    Commented 18/06/2018 às 22:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .