菜单栏与AngularJs发生故障

时间:2017-07-04 05:00:30

标签: javascript angularjs

我对AngularJs有点新意,所以我遇到了问题。 让我解释一下我想要实现的目标。

我设计了两个带有子和父关系的 div

android {
    sourceSets {
        main {
            manifest.srcFile 'AndroidManifest.xml'
        }
    }

    defaultConfig {
        applicationId = doExtractStringFromManifest("package")
    }

    packagingOptions {
        exclude 'META-INF/LICENSE'
        exclude 'META-INF/rxjava.properties'
    }
}

当我将鼠标悬停或移动到父 div 上时,隐藏/显示 相应的 div
但是我的代码在悬停时隐藏/显示 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>

此代码的控制器,见下文

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

Css文件

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

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

      };

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

 });

1 个答案:

答案 0 :(得分:1)

您必须更改函数的名称,因为两个div都使用相同的函数并更改相同的属性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;
     };