Не могу закрыть раскрывающийся список внутри div

Это моя ситуация; У меня есть поиск ввода. Когда я нажимаю на него, под этим вводом появляется новый div. Внутри этого div (в основном он работает как раскрывающийся список) есть кнопка раскрывающегося списка (я использую uikit в качестве CSS-фреймворка и Angularjs). Я создал директиву, согласно которой, когда пользователь щелкает внутри этого div, он остается открытым, но когда пользователь щелкает за его пределами, он закрывается. Это работает, но у меня есть проблема прямо сейчас. Предполагая, что я нажму кнопку раскрывающегося списка, он откроет ее. Что бы я хотел, так это то, что если я нажму за пределами этой кнопки, даже если я нажму внутри div, он закроет раскрывающийся список. На самом деле не работает. Он закрывает все, только если я щелкаю за пределами «большого» div. Я знаю, что это трудно объяснить, но я стараюсь изо всех сил. Кстати, вот jsfiddle, который я создал с ситуацией: http://jsfiddle.net/8y48q/120/ Я публикую код:

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

Спасибо. Я готов предоставить любую другую информацию


javascript drop-down-menu css angularjs getuikit
person Atlas91    schedule 18.04.2016    source источник
comment
Почему бы просто не переключить раскрывающийся список? Поэтому всегда вы щелкаете, вы меняете, видно это или нет. jsfiddle.net/8y48q/122 Но для события body-click вам нужно указать div на всю высоту, чтобы было кликабельно.   -  person ohboy21    schedule 18.04.2016
comment
хм, я не могу понять, изменили ли вы что-то в своем jsfiddle по сравнению с моим   -  person Atlas91    schedule 18.04.2016
comment
Извините, вот новая ссылка: jsfiddle.net/8y48q/123 Еще есть проблема. Каким-то образом ваш $document.bind(click) срабатывает дважды. В противном случае это сработает.   -  person ohboy21    schedule 18.04.2016
comment
Также в документах говорится: добавьте класс .uk-dropdown-close в раскрывающийся контейнер или элемент, чтобы скрыть раскрывающийся список, когда пользователь нажимает на элемент. Пробовал, но не работает :/   -  person cssBlaster21895    schedule 19.04.2016

Ответы (1)


arrow_upward
0
arrow_downward

Проблема была в директиве 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);
            });

        }
    }
});
person Hans Brunner    schedule 23.09.2016