无法在div内关闭下拉

这是我的情况; 我有一个输入搜索。当我点击它时，这个输入下会出现一个新的div。在这个div里面（div基本上就像下拉菜单一样），有一个下拉按钮（我使用uikit作为css框架和Angularjs）。我创建了一个指令，当用户在该div内部单击时，div保持打开状态，但当用户单击它外部时，它会关闭。它的工作，但我现在有一个问题。假设我点击下拉按钮，它会打开它。我会是，如果我点击这个按钮之外，即使我点击里面的div，它会关闭下拉。其实不行。只有当我点击“大”div时，它才会关闭所有内容。我知道这很难解释，但我正在努力做到最好。这里的道路是一个的jsfiddle我受够了这种情况产生：http://jsfiddle.net/8y48q/120/ 我张贴一些代码：无法在div内关闭下拉

<div ng-app="myApp"> 
    <div ng-controller="TestCtrl">  
    <form class="uk-form uk-margin-large"> 
     <input autocomplete="off" 
       data-ng-click="openSearch();" 
       style="padding-left: 35px!important;" 
       hide-search="hideSearchContainer()" 
       data-ng-model="searchText" class="uk-width-1-1" type="search" 
       placeholder="Hello"> 
     <div hide-search="hideSearchContainer()" data-ng-class="{'search-input':userSearch, 
        'search-input-closed':!userSearch}" 
        class="search-input-closed"> 
      <div class="uk-width-1-3 center-pane"> 

          <div class="uk-button-dropdown" title="Click here" data-uk-dropdown="{mode:'click'}"> 
           <button type="button" class="uk-button uk-button-primary qt-button-dropdown-material"> 
            <span class="qt-dropdown-text-material">Types</span> 
           </button> 

           <div class="uk-dropdown qt-dropdown uk-dropdown-scrollable" style=""> 
            <ul class="uk-nav uk-nav-dropdown" id="kb_menu"> 
             <li key-navigation ng-repeat="item in items"> 
          <a href="">{{item}}</a> 
         </li> 
            </ul> 
           </div> 
          </div> 
         </div> 
     </div>    

    </form> 
    </div> 
</div>

这里是在Angularjs控制器与指令

var myApp = angular.module('myApp', []); 

myApp.controller('TestCtrl',function($scope){ 
    $scope.items=['menu item 1','menu item 2']; 
    $scope.openSearch = function(){ 
      $scope.userSearch = true; 
     }; 

    $scope.hideSearchContainer = function(){ 
    $scope.userSearch = false; 
    }; 
    $scope.itemClicked = function(item, event, index){ 

    } 

    $(document).on('click', '.uk-dropdown', function() { 
     $(this).parents('[data-uk-dropdown]:first').removeClass('uk-open'); 
    }); 
}); 

myApp.directive('hideSearch', function($document){ 
    return { 
     restrict: 'A', 
     link: function(scope, elem, attr, ctrl) { 
      elem.bind('click', function(e) { 
       e.stopPropagation(); 
      }); 
      $document.bind('click', function() { 
       scope.$apply(attr.hideSearch); 
      }) 
     } 
    } 
});

感谢。我可以提供任何其他信息

来源

2016-04-18 End.Game

为什么不直接切换的下拉列表？所以，你总是点击，如果它看到或没有反转，你就会反转。 http://jsfiddle.net/8y48q/122/但是，对于一个身体点击事件，你需要给一个div的全高度可点击。 –

嗯我不明白，如果你已经改变了你的jsfiddle与我的相比 –

对不起，这里的新链接：http://jsfiddle.net/8y48q/123/仍然有一个问题。不知何故，你的$ document.bind（点击）被触发两次。否则它会起作用。 –

问题是指令中的e.stopPropagation（）。这是为了防止其孩子的所有点击事件。所以我已经删除它，并添加一些条件在document.bind上，似乎工作。

这里的脚本

var myApp = angular.module('myApp', []); 

myApp.controller('TestCtrl',function($scope){ 
    $scope.items=['menu item 1','menu item 2']; 
    $scope.openSearch = function(){ 
      $scope.userSearch = true; 
     }; 

    $scope.hideSearchContainer = function(){ 
    $scope.userSearch = false; 
    }; 
    $scope.itemClicked = function(item, event, index){ 

    } 
    $(document).on('click', '.uk-dropdown', function() { 
     $(this).parents('[data-uk-dropdown]:first').removeClass('uk-open'); 
    }); 

}); 

myApp.directive('hideSearch', function($document){ 
    return { 
     restrict: 'A', 
     link: function(scope, elem, attr, ctrl) { 
      elem.bind('click', function(e) { 
       //e.stopPropagation(); 
      }); 
      $document.bind('click', function(e) { 
       if(e.target.className == "uk-notouch") 
        scope.$apply(attr.hideSearch); 
      }); 

     } 
    } 
});

来源

2016-09-23 09:32:56

无法在div内关闭下拉

回答

相关问题