垂直菜单引导和角度

Question

我正在尝试创建像这个网站的垂直菜单.我正在寻找的是:当菜单是折叠时,子菜单用悬停打开,当菜单打开时,子菜单在链接下方打开.

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

角

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;
    }


});  

UPDATE

带子菜单的菜单:

子菜单以悬停打开

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

Answer 1

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

从子菜单列表中删除折叠类，并在菜单上使用 ng-mouseenter ，在旁边标签上使用 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 标记之间。