javascript - 垂直菜单 Bootstrap 和 Angular

Question

我正在尝试创建这样的垂直菜单 site .我正在寻找的是:当菜单折叠时，子菜单用悬停打开，当菜单打开时，子菜单在链接下方打开。

这是我的 JSFiddle ，我所做的是:点击按钮后我可以打开菜单。
子菜单正在工作(最后一个)但是我不想在菜单折叠时打开子菜单。

Angular

var app = angular.module('myApp', []);

app.controller('mainCtrl', function ($scope) {

    $scope.noneStyle = false;
    $scope.bodyCon = false;
    $scope.sasd = "asd";


    //Toggle the styles
    $scope.toggleStyle = function () {
        //If they are true, they will become false 
        //and false will become true
        $scope.bodyCon = !$scope.bodyCon;
        $scope.noneStyle = !$scope.noneStyle;
    }


});  

更新

带有子菜单的菜单:

悬停打开子菜单

这就是我想要的!!提前谢谢

Answer 1

试试这个。 http://jsfiddle.net/zqdmny41/4/

从子菜单列表中删除折叠类，并在菜单上使用 ng-mouseenter，在 aside 标签上使用 ng-mouseleave。

<aside class="rightbar" id="rightMenu" ng-class="{'noneStyle' : noneStyle}"  ng-mouseleave="subMenu = false">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#rightMenu" href="#" ng-mouseover="subMenu = true">Tools<i class="fa fa-file-text"></i></a>

你的 div 和 li 标签也到处都是，请正确组织它们。例如，div 不能位于两个 li 标签之间。