Javascript 垂直菜单引导和角度

我正在尝试创建这样的垂直菜单。我要寻找的是：当菜单被折叠时，子菜单用鼠标悬停打开，当菜单打开时，子菜单在链接下面打开

这是我的，我所做的是：单击按钮后可以打开菜单。
子菜单正在工作（最后一个）但当菜单折叠时，我不想打开子菜单

棱角分明

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


});  

更新

带有子菜单的菜单：

子菜单以悬停方式打开

这就是我想要的！！ 提前使用thx

试试这个

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

只需使用CSS，在切换“非样式”时对子菜单应用不同的样式，在“正常样式”下，子菜单应使用

位置：绝对；左：--px用于定位，在“非样式”下，它应该是
位置：静态
，以强制显示初始样式

顺便说一句，请不要将
标记放在
下，这不是编写HTML的好方法，我已经为您更改了它


var-app=angular.module（'myApp'，[]）；
应用程序控制器（'mainCtrl'，函数（$scope）{
$scope.noneStyle=false；
$scope.bodyCon=false；
$scope.sasd=“asd”；
//切换样式
$scope.toggleStyle=函数（）{
//如果它们是真的，它们就会变成假的
//虚假会变成真实
$scope.bodyCon=！$scope.bodyCon；
$scope.noneStyle=！$scope.noneStyle；
}
//将类添加到搜索框
$scope.openSearch=false；
$scope.searchToggle=函数（）{
$scope.openSearch=！$scope.openSearch；
}
});
正文{
背景：#300F18！重要；
}
李{
列表样式：无；
}
.rightbar{
背景：无重复滚动0 0#fff；
左边框：5px实心#ccc；
身高：100%；
填充顶部：50px；
位置：固定；
右：0；
宽度：60px；
z指数：200；
}
李先生{
颜色：#333；
字号：100；
填充：16px 0 21px；
/*宽度：0*/
过渡：所有0.3秒缓解；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
-o-过渡：所有0.3秒的速度；
过渡：所有0.3秒缓解；
}
.rightbar ul li:悬停{
背景：继承；
宽度：100%；
}
a.rightbar ul li a{
颜色：#8b；
浮动：对；
字体大小：12px；
线高：23px；
右边填充：54px！重要；
字号：0；
过渡：所有0.2秒到0秒；
-webkit过渡：所有0.1s轻松；
-moz转换：所有0.1秒的易用性；
-o型转换：所有0.1s的易用性；
过渡：所有0.1秒轻松；
}
.手风琴标题.手风琴切换{
填充：0；
}
.rightbar ul li a i{
颜色：#8b；
浮动：对；
字体大小：22px；
位置：绝对位置；
右：15px；
过渡：所有0.3秒缓解；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
-o-过渡：所有0.3秒的速度；
过渡：所有0.3秒缓解；
}
·手风琴组{
边界：中等无；
}
.工具菜单{
位置：相对位置；
}
.工具菜单.子菜单{
位置：绝对位置；
宽度：100px；
左：-140px；
背景色：#fff；
显示：无；
}
.工具菜单：悬停.子菜单{
显示：块；
}
.noneStyle.tools菜单子菜单{
显示：块；
位置：静态；
}
.手风琴{
填充：10px0；
列表样式：无；
}
.右键ul li:悬停a，
.右键ul li:悬停a i{
颜色：#23b7e5；
文字装饰：无；
} 
a.风格a{
字体大小：13px！重要；
}
.非风格{
宽度：144px；
z指数：1000；
过渡：所有0.3秒缓解；
-webkit过渡：所有0.3秒轻松；
-moz转换：所有0.3秒轻松；
-o-过渡：所有0.3秒的速度；
过渡：所有0.3秒缓解；
}










一,
二,
三,



{{sasd}}
我不明白你的问题。你能再解释一下吗？当然，请检查我的链接，这里有一个带有子链接的侧栏菜单，当你点击按钮并关闭菜单时，子菜单会以悬停的方式打开，这就是我想让我知道的，如果我还不清楚我想要的图片，那么打开菜单-单击子菜单项（它会将你引导到另一个页面）-关闭菜单，您希望子菜单保持菜单中的活动链接，对吗？不，稍等一下，我将更新我的questionthx@Aakash，但这不是我想要的，我已经更新了我的问题，请检查它，我会这样做，但我不想在菜单打开时用鼠标悬停打开子菜单，看看我的问题和联系人你是最好的和有创造力的，但这不是最好的和干净的方式。thx是的，你仍然需要做一些小的微调。欢迎光临。