单击项目后关闭引导下拉菜单答案

【问题标题】：Close bootstrap drop down menu after a item is clicked单击项目后关闭引导下拉菜单
【发布时间】：2016-03-16 20:24:53
【问题描述】：

所以在我的引导程序 3.3.6 中，我有一个包含链接的菜单。

在较小的尺寸中，菜单变为下拉菜单，我希望在单击菜单项时菜单消失。

我想我可以做类似的事情

function closeMenu(){
  //? uhm, what?
}

document.getElementByClass ("menuLink").addEventListener("closeMenu",findit,false);

但我不知道在我的函数中设置什么，所以下拉菜单会再次恢复

有什么帮助吗？

谢谢

【问题讨论】：

如果你在问想法，那么它可以是..点击后使用点击事件意味着有人会点击菜单然后再次使用点击事件，所以会有 2 次点击，之后你的菜单将关闭开幕
@Leothelion 你好。我不明白为什么我应该“再次使用点击事件”。为什么我必须再次使用点击？用户单击菜单按钮> 菜单下降> 用户单击菜单项> 重定向和菜单同时关闭。所以，我想一键就够了。如果我错了，请纠正我。谢谢
点击项目后应该关闭：bootply.com/5t0sASdQWw
Great Skelly.. 遵循他的代码.. 你的工作已经完成.. 并且我给 workarround.. 离开那个..thanx skelly

标签： css twitter-bootstrap drop-down-menu

【解决方案1】：

我想出了一个办法。

在带有链接的 div 中，我为每个链接设置了一个控制器和 ng-click。

<ul class="nav navbar-nav navbar-right" ng-controller="navCtrl" >                  
                        <li><a ng-click="menuLinkClicked()" href="#/"> Home </a></li>                
                        <li><a ng-click="menuLinkClicked()" href="#jake"> Jake</a></li>                
                        <li><a ng-click="menuLinkClicked()" href="#amir"> Amir</a></li>    

</ul>

在我的控制器中

app.controller('navCtrl',['$scope',
    function ($scope) {  
        $scope.menuLinkClicked = function () {                        
            document.getElementById("navbar").className="navbar-collapse collapse";
        };        
    }
]);

navbar 是在较小屏幕中折叠的菜单的 ID。我使用document.getElementById("navbar") 来获取它，然后更改它的类以使其消失。

【讨论】：