無法在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內關閉下拉

回答

相關問題