1

请帮助修复脚本

http://jsfiddle.net/M4pXU/

当您单击红色字段时，面板会显示。好的

我需要当你点击黄色区域时是一个隐藏的面板。因此，如果用户单击绿色字段，则不会发生任何事情

html:

<div class="body" ng-app="moduleSlidePanel" ng-controller="controllerSlidePanel" ng-click="shoooooo = false">
    <div class="wrap_news">
        <div class="slide_panel" ng-class="{'showPanel':sho}" ng-click="sho = true">
            <div class="slide_panel_inner">
                qweeeeeeeeeeeeeeeeeeee eeety<br />
                qweeeeeeeeeeeeeeeeeeee eeety<br />
                qweeeeeeeeeeeeeeeeeeee eeety<br />
                qweeeeeeeeeeeeeeeeeeee eeety<br />
                qweeeeeeeeeeeeeeeeeeee eeety<br />
                qweeeeeeeeeeeeeeeeeeee eeety<br />
            </div>      
        </div>                      
    </div>
</div>

CSS：

.body{  
    height:100%;    
    background: yellow;

    font: 14px helvetica, arial, sans-serif;    
}   

html, body, div, h1, h2, h3, h4, h5, h6, a, a img, p, ul, ol, li, span, fieldset , form, dl, dd, dt, table, tr, td, img{ 
    border: none;
    margin: 0; 
    outline: none;  
    padding: 0;
}

html{
    height:100%;        
}

body{   
    height:100%;    
    background: yellow;

    font: 14px helvetica, arial, sans-serif;    
}

/******************************************************************************************************************************* 2. fonts */    


/****************************************************************************************************************************** 3.  layout */   
/******************************************************************************************************************************* 5.1  */    
.wrap_news{
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: 500px;
}

    .wrap_news .slide_panel{
        position: absolute;
        left: -200px;
        top: 100px;
        background: red;
        padding-right: 30px;
        width: 200px;
        overflow: hidden;
        padding-right: 30px;
        -webkit-transition: 1s linear all; /* Safari/Chrome */
         -moz-transition: 1s linear all; /* Firefox */
         -ms-transition: 1s linear all; /* IE10 */
         -o-transition: 1s linear all; /* Opera */
         transition: 1s linear all; /* Future Browsers */       
    }

        .slide_panel_inner{
            background: lime;
        }

    .wrap_news .slide_panel.showPanel{
        left: 0;
        right: auto;
    }
4

1 回答 1

2

您需要的是停止事件的click传播，如下所示：

  $scope.show = function(e){
     $scope.sho = true;
     e.stopPropagation();
  }

  $scope.hide = function(){
     $scope.sho = false;
  }

工作：http: //jsfiddle.net/cherniv/M4pXU/2/

于 2013-09-11T06:41:25.910 回答