Bootstrap dropdown parent menu active class

人走茶凉 提交于 2021-02-08 13:14:15

问题


Rookie here, searched for answer and can't discover what i am doing wrong.

My menu works fine in active class on "normal" menus, but I cannot find the solution to make the parent menu a "active" one.

![dropdown menu bootstrap][1]

The code:

<!-- /.abre dropdown -->
<li class="dropdown">
  <a data-toggle="dropdown" class="dropdown-toggle" href="#">O Que Fazer</a>
  <ul class="dropdown-menu">
    <li><a href="<?php bloginfo('url'); ?>/sem-sair-de-carro/">Sem Sair de Carro  <i class="icon-arrow-right"></i></a>
    <li><a href="<?php bloginfo('url'); ?>/de-carro-a-menos-de-15-minutos/">De Carro a Menos de 15 Minutos </a></li>
    <li><a href="<?php bloginfo('url'); ?>/usando-o-carro/">Usando O Carro </a></li>
  </ul>
</li>
<!-- /fecha dropdown -->

What am I missing?

I tried the class="active" but no good:

<a data-toggle="dropdown" class="dropdown-toggle" class="active" href="#">O Que Fazer</a>

Maybe this is quite basic, but searched around for an answer and cannot find aby.

Much appreciated


回答1:


I know it has been 6 months since you posted this, but I have a solution for you :)

I have got this piece of mark up from the getbootstrap.com (http://getbootstrap.com/components/#navbar) and all you have to do is add the word 'active' in the <li class="dropdown"> like the code below:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
   <ul class="nav navbar-nav">
       <li><a href="#">Link</a></li>
       <!--<li class="dropdown">-->
       <li class="dropdown active">
           <a href="#" class="dropdown-toggle" data-toggle="dropdown">Industries <span class="caret"></span></a>
           <ul class="dropdown-menu" role="menu">
               <li><a href="#">Link1</a></li>
               <li><a href="#">Link2</a></li>
           </ul>
       </li>
   </ul>
</div>

I hope it is not too late!




回答2:


Maybe with the attribut : role="menu" on the <ul> element ?

<!-- /.abre dropdown -->
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle" href="#">O Que Fazer</a>
<ul class="dropdown-menu" role="menu">
    <li>
        <a href="<?php bloginfo('url'); ?>/sem-sair-de-carro/">Sem Sair de Carro  <i class="icon-arrow-right"></i></a>
    </li>
    <li>
        <a href="<?php bloginfo('url'); ?>/de-carro-a-menos-de-15-minutos/">De Carro a Menos de 15 Minutos </a>
    </li>
    <li>
        <a href="<?php bloginfo('url'); ?>/usando-o-carro/">Usando O Carro </a>
    </li>
</ul>
</li>
<!-- /fecha dropdown -->



回答3:


By removing data-toggle="dropdown" solved the problem for me.



来源:https://stackoverflow.com/questions/21829835/bootstrap-dropdown-parent-menu-active-class

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!