菜单栏AngularJs故障

我对AngularJs有点新，所以我陷入了这个问题。让我解释一下我想达到的目标。菜单栏AngularJs故障

我有设计两个div与孩子和父母的关系。

// first parent div 
<div> 
    <div> 
     child div // show/hide content of this div 
    </div> 

</div> 


// second parent div 
<div> 
    <div> 
     child div // show/hide content of this div 
    </div> 

</div>

当我悬停或将鼠标移动到父DIV应该隐藏/显示的各自孩子DIV。
但用我的代码悬停它隐藏/显示这两个孩子的内容div。我在代码中必须做什么更改？

查看完整的代码

<body ng-app="app"> 
<div ng-app="headermain" ng-controller="headerController"> 
    <div class="top-menu col-xs-36 "> 

      // parent div one 

     <div class="menu-item col-xs-6" ng-mouseover="hoverIn()" style="background-color:pink"> 
      <span >Parent one</span> 

      // child div, want to hide/show content of this div 

      <div class="drop-down;col-xs-10" ng-show="showMe" ng-mouseleave="hoverOut()" style="background-color:pink"> 
       <ul> 
        <li>child one details</li> 
        <li>parent one detail</li> 
       </ul> 
      </div> 


     </div> 

      // parent div two 
     <div class="menu-item col-xs-6" ng-mouseover="hoverIn()"> 
      <span >Parent two</span> 

       // child div, want to hide/show content of this div 

      <div class="drop-down;col-xs-10" ng-show="showMe" ng-mouseleave="hoverOut()"> 
       <ul> 
        <li>child two Details</li> 
        <li>parent two detail</li> 
       </ul> 
      </div> 


     </div> 


    </div> 

</div>

控制器此代码，请参见下面

var app = angular.module("app", []); 
app.controller("headerController",function($scope){ 

    $scope.hoverIn = function(){ 
    this.showMe = true; 

     }; 

    $scope.hoverOut = function(){ 
    this.showMe = false; 
     }; 

});

CSS文件

.top-menu { 
overflow: hidden; 
} 

.top-menu .drop-down { 

position: absolute; 
top: 20px; 
z-index: 10000; 
background-color: white; 
box-shadow: 0px 0px 3px rgb(241, 241, 241); 
border: 1px solid #d1d1d1; 
} 

.top-menu .drop-down ul { 
padding: 0px; 
margin: 0px; 
list-style-type: none; 
min-width: 180px; 
}

来源

2017-07-04 Aamir

你必须改变你的函数名因为这两个d iv's使用相同的功能并更改相同的属性showMe。

HTML：

<body ng-app="app"> 
    <div ng-app="headermain" ng-controller="headerController"> 
     <div class="top-menu col-xs-36 "> 

      // parent div one 

      <div class="menu-item col-xs-6" ng-mouseover="hoverIn(1)" style="background-color:pink"> 
       <span>Parent one</span> // child div, want to hide/show content of this div 

       <div class="drop-down;col-xs-10" ng-show="showMe[1]" ng-mouseleave="hoverOut(1)" style="background-color:pink"> 
        <ul> 
         <li>child one details</li> 
         <li>parent one detail</li> 
        </ul> 
       </div> 

      </div> 

      // parent div two 
      <div class="menu-item col-xs-6" ng-mouseover="hoverIn(2)"> 
       <span>Parent two</span> // child div, want to hide/show content of this div 

       <div class="drop-down;col-xs-10" ng-show="showMe[2]" ng-mouseleave="hoverOut(2)"> 
        <ul> 
         <li>child two Details</li> 
         <li>parent two detail</li> 
        </ul> 
       </div> 

      </div> 

     </div> 

    </div>

JS：

$scope.showMe=[]; 
    $scope.hoverIn = function(id) { 
     $scope.showMe[id] = true; 
    }; 
    $scope.hoverOut = function() { 
     $scope.showMe[id] = false; 
    };

来源

2017-07-04 05:06:49 Vivz

我想用单一的功能来实现它，原因是，如果我有10个菜单项，我必须写10个不同的功能那是不是一个好方法 – Aamir

然后你可以传递一个参数给函数，并检查 - >如果这是参数，则显示/隐藏这个div（意思是触发div）。 – Vivz

非常感谢它的工作正常。 – Aamir

菜单栏AngularJs故障

回答

相关问题