Menüleiste Funktionsstörung mit AngularJs

Ich bin etwas neu bei AngularJs, also habe ich mich an das Problem gehalten. Lassen Sie mich erklären, was ich erreichen möchte.Menüleiste Funktionsstörung mit AngularJs

Ich habe Design zwei div mit Kind und Eltern-Beziehung.

// 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>

Wenn ich schweben oder mit der Maus über Eltern bewegen div es sollte hide/show die jeweiligen Kind div.
Aber mit meinem Code auf Hover es verbirgt/zeigt den Inhalt des Kindes div. Was Änderungen muss ich in Code tun?

Gesamten Code

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

-Controller für diesen Code, siehe unten

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

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

     }; 

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

});

Css Datei

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

Quelle

2017-07-04 Aamir

Sie haben den Namen Ihrer Funktionen ändern da beide d iv's benutzen dieselbe Funktion und ändern dasselbe Attribut 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; 
    };

Quelle

2017-07-04 05:06:49 Vivz

ich es mit einzelner Funktion erreichen will, ist Grund, wenn ich 10 Menüpunkt habe ich 10 verschiedene Funktion schreiben für das ist kein guter Ansatz – Aamir

Dann können Sie einen Parameter an die Funktion übergeben und überprüfen -> Wenn dies der Parameter ist, zeigen/verstecken Sie dieses div (was bedeutet, dass div). – Vivz

Vielen Dank, es funktioniert gut. – Aamir

Menüleiste Funktionsstörung mit AngularJs

Antwort

Verwandte Themen