html - 使用 bootstrap 在菜单中下拉

Question

我有一个菜单栏，其中一个列表项我想得到一个下拉菜单，因为我们只能在那里放置几个图标。对于最后一个元素，当我点击它时，下拉菜单似乎没有工作 。我应该在这里做什么。

谢谢。

https://jsfiddle.net/snt/16y2ckjf/

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="navbarBottom" class="navbarwrapper ">
    <div class="navbar navbar-inverse fixed-nav-bar">
        <ul class="nav navbar-nav">
<li><a href="#"><span class="fa fa-chevron-circle-up"></span></a>
            </li>
            <li><a href="#"><span class="fa fa-chevron-circle-up"></span></a>
            </li>
            <li><a href="#"><span class="fa fa-chevron-circle-up"></span></a>
            </li>
            
<li class="dropdown-toggle dropup"><a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="fa fa-chevron-circle-up"></span></a>
              <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#" id="mylocation">
                            <span class="fa fa-location-arrow fa-inverse"></span>
                        </a>
                    </li>
                    <li>
                        <a href="#" id="getdistance" >
                            <span class="fa fa-exchange fa-inverse"></span>
                        </a>
                    </li>
                    <li>
                        <a href="#" id="annotationtool">
                            <span class="fa fa-font fa-inverse"></span>
                        </a>
                    </li>
                    <li>
                        <a href="#" id="annotationtool">
                            <span class="fa fa-font fa-inverse"></span>
                        </a>
                    </li>
                </ul>
            </li>
            
             </ul>
    </div>
</div>

Answer 1

看起来您忘记包含 Bootstrap JS 和 jQuery。如果你添加这些似乎工作。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="navbarBottom" class="navbarwrapper ">
    <div class="navbar navbar-inverse fixed-nav-bar">
        <ul class="nav navbar-nav">
<li><a><span class="fa fa-chevron-circle-up"></span></a>
            </li>
            <li><a href="#"><span class="fa fa-chevron-circle-up"></span></a>
            </li>
            <li><a href="#"><span class="fa fa-chevron-circle-up"></span></a>
            </li>
            
<li class="dropdown-toggle dropup">
              <ul class="dropdown-menu" role="menu">
                    <li>
                        <a href="#" id="mylocation">
                            <span class="fa fa-location-arrow fa-inverse"></span>
                        </a>
                    </li>
                    <li>
                        <a href="#" id="getdistance" >
                            <span class="fa fa-exchange fa-inverse"></span>
                        </a>
                    </li>
                    <li>
                        <a href="#" id="annotationtool">
                            <span class="fa fa-font fa-inverse"></span>
                        </a>
                    </li>
                    <li>
                        <a href="#" id="annotationtool">
                            <span class="fa fa-font fa-inverse"></span>
                        </a>
                    </li>
                </ul>
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><span class="fa fa-chevron-circle-up"></span></a>
            </li>
            
             </ul>
    </div>
</div>