菜單欄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故障

回答

相關問題