dongrouli2667
2014-05-05 07:05 阅读 37
已采纳

Bootstrap顶级下拉菜单无法正常工作

I am using bootstrap3 and have created a dropdown menu, the children of the top level are working ok but the parent is not working when I try to say click on 'About', it just shows the children and does not go to about.php

<div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li><a href="index.php">Home</a>
                </li>
                <li class="dropdown"><a href="about.php" data-toggle="dropdown" class="dropdown-toggle">About<b class="caret"></b></a>
                <ul class="dropdown-menu">
                   <li><a href="hours.php">Hours</a> </li>
                   <li><a href="terms.php">Terms/Conditions of Hire</a> </li>
                </ul>
                </li>
                <li><a href="location.php">Find Us</a>
                </li>
                <li><a href="services.php">Services</a>
                </li>
                <li><a href="contact.php">Contact</a>
                </li>
            </ul>
        </div>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

2条回答 默认 最新

  • 已采纳
    dongyuan9292 dongyuan9292 2014-05-05 07:21

    What you are trying to do doesn't work because dropdowns are made to be clicked, and have no action but to open a menu. You can clearly see that in the examples here in the documentation

    If you made your button go to about.php when you clicked About you would never be able to open the dropdown menu to select other items.

    If you want a button you can click AND a dropdown menu you should look at adding a Split Button Dropdown (documentation here) which will give the use a clickable button, and a dropdown arrow to select more options.

    点赞 评论 复制链接分享
  • dongli4711 dongli4711 2014-05-05 07:27

    The navbar child elements are set to work based on toggle. So, practically, when you click on 'About', the child elements should appear. Now for your requirement, you could change it to show the child elements on hover so that you get to click the 'About' link.

    So first, remove these two properties from your anchor tag:

    class="dropdown-toggle" data-toggle="dropdown"
    

    Next, in your css, set the child menu to be displayed on hover:

    ul.nav li.dropdown:hover > ul.dropdown-menu {
        display: block;    
    }
    

    For the working you can check:

    DEMO

    点赞 评论 复制链接分享

相关推荐