Bootstrap和Angular中的垂直菜单

Question

我正在尝试创建类似该网站的垂直菜单。我想要的是：当菜单折叠时，鼠标悬停在子菜单上会打开它们；当菜单展开时，子菜单会在链接下方打开。

这是我的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;
    }


});  

更新

带子菜单的菜单：

鼠标悬停打开子菜单：

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

- user3856699

---

当然，请查看我的链接http://wrapbootstrap.com/preview/WB0RR5C65，那里有一个带有子链接的侧边栏菜单。当您点击按钮关闭菜单时，子菜单会在悬停时打开，这就是我想要的。 - user3856699

那么您打开菜单 - 点击子菜单项（将您重定向到另一页） - 关闭菜单，您希望子菜单保持菜单中的活动链接，是这样吗？ - simeg

不好意思，请稍等一下，我要更新我的问题。 - user3856699

我已经更新了，请查看。 - user3856699

http://jsfiddle.net/sadeghbayan/zqdmny41/8/ - user3856699

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标签之间。

- Aakash

---

谢谢@Aakash，但这不是我想要的，我已经更新了我的问题，请检查一下。 - user3856699

好的，我会做，但是当菜单打开时，我不想通过悬停打开子菜单，请查看我的问题和链接。 - user3856699

你很优秀和有创意，但这不是最好和最干净的方式。 非常感谢。 - user3856699

是的，你仍然需要进行一些微调。不用谢。 - Aakash

Answer 2

只需使用CSS，当“noneStyle”切换时，为您的子菜单应用不同的样式，在正常样式下，您的子菜单应使用position: absolute; left: --px;进行定位，在“noneStyle”下，它应该是position: static，以强制使用初始样式显示。

顺便说一句，请不要将

标签放在

下面，这不是编写HTML的好方法，我已经为您更改了。

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;
    }
    //add class to search box
    $scope.openSearch = false;
    $scope.searchToggle = function () {

        $scope.openSearch = !$scope.openSearch;

    }

    
});

body{
    background:#300F18 !important;
    
}
li{
    
    list-style:none;
}
.rightbar {
    background: none repeat scroll 0 0 #fff;
    border-left: 5px solid #ccc;
    height: 100%;
    padding-top: 50px;
    position: fixed;
    right: 0;
    width: 60px;
    z-index: 200;
}
.rightbar ul li {
   color: #333;
    font-weight: 100;
    padding: 16px 0 21px;
    /*width: 0;*/
    transition:all 0.3s ease;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        -o-transition:all 0.3s ease;     
        transition:all 0.3s ease;

}
.rightbar ul li:hover {
  background:inherit;
  width:100%;

}
.rightbar ul li a {
    color: #8b8b8b;
    float: right;
    font-size: 12px;
    line-height: 23px;
    padding-right: 54px !important;
    font-size:0;
    transition: all 0.2s ease 0s;
        -webkit-transition:all 0.1s ease;
        -moz-transition:all 0.1s ease;
        -o-transition:all 0.1s ease;     
        transition:all 0.1s ease;
}
.accordion-heading .accordion-toggle{
    padding:0;
}



.rightbar ul li a i{
  color: #8b8b8b;
    float: right;
    font-size: 22px;
    position: absolute;
    right: 15px;
       transition:all 0.3s ease;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        -o-transition:all 0.3s ease;     
        transition:all 0.3s ease;
}

.accordion-group{
    border:medium none;
}

.tools-menu {
  position: relative;
}

.tools-menu .submenu {
  position: absolute;
  width: 100px;
  left: -140px;
  background-color: #fff;
  display: none;
}

.tools-menu:hover .submenu {
  display: block;
}

.noneStyle .tools-menu .submenu {
  display: block;
  position: static;
}

.accordion-inner ul li{
    padding:10px 0;
    list-style:none;
}
    .rightbar ul li:hover a,
    .rightbar ul li:hover a i {
        color: #23b7e5;
        text-decoration: none;
    } 
    
.noneStyle a{
    font-size:13px !important;
}
.noneStyle {
     width: 144px;
    z-index: 1000;
     transition:all 0.3s ease;
        -webkit-transition:all 0.3s ease;
        -moz-transition:all 0.3s ease;
        -o-transition:all 0.3s ease;     
        transition:all 0.3s ease;

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="mainCtrl">
        <div class="navbar navbar-default topnavbar">

                <ul class="nav navbar-nav">

                    <li>
                        <a href="#" ng-click="toggleStyle()">

                            <em class=" fa fa-navicon">
                            </em>
                        </a>
                    </li>

                </ul>
                

         </div>
    
    <aside class="rightbar" id="rightMenu" ng-class="{'noneStyle' : noneStyle}">

        <ul>
            <li><a href="#/456">Dashboard<i class="fa fa-tachometer"></i></a></li>
            <li><a href="#/123">write<i class="fa fa-pencil-square-o"></i></a></li>
            <li><a href="#/963">list<i class="fa fa-list"></i></a></li>
            <li class="tools-menu">
              <a class="accordion-toggle" data-toggle="collapse" data-parent="#rightMenu" href="#collapseFour">
                                Tools<i class="fa fa-file-text"></i>
                            </a>
                  <ul class="submenu">
                    <li> 1</li>
                    <li> 2</li>
                    <li> 3</li>
                  </ul>
            </li>
        </ul>


       

    </aside>
{{sasd}}
        
</div>

- kite.js.org