强制打开下拉菜单

Question

当我点击输入文本时，我会打开一个下拉菜单。因此，行为应该与打开它的按钮相同。我创建了一个 jsfiddle here

这是我使用的代码：

<div ng-app="myApp">
    <div class="uk-width-1-1" ng-controller="TestCtrl">        
      <form id="form" class="uk-form uk-width-1-1 center-form">
          <div class="uk-button-group uk-width-1-2 uk-vertical-align-middle">

              <!-- This is a button -->
              <input id="input" type="text" placeholder="text" class="uk-width-1-1 uk-vertical-align-middle">

                  <!-- This is the container enabling the JavaScript -->
                  <div data-uk-dropdown="{mode:'click', justify:'#input'}">

                      <!-- This is the button toggling the dropdown -->
                      <a href="" style="vertical-align: middle!important;" class="uk-button"><i class="uk-icon-caret-down"></i></a>

                      <!-- This is the dropdown -->
                      <div class="uk-dropdown uk-dropdown-small">
                          <ul class="uk-nav uk-nav-dropdown" ng-repeat="item in items">
                              <li><a href="">{{item}}</a></li>
                          </ul>
                      </div>

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

我尝试了一些 angular 但它不起作用

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

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

    $scope.itemClicked = function(item, event, index){

    }

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

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

当然你在input里写的时候，如果下拉框是打开的，一定不能关闭。

Answer 1

#input 处理程序中的

$(this) 不是您所想的。您可以使用 .uk-dropdown。 focus 应该用于 textbox.

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

$(document).on('focus', '#input', function () {
    $('.uk-dropdown').closest('[data-uk-dropdown]:first').addClass('uk-open');
}).on('blur', '#input', function() {
    $('.uk-dropdown').closest('[data-uk-dropdown]:first').removeClass('uk-open');
});

演示：https://jsfiddle.net/tusharj/8y48q/49/

强制打开下拉菜单

Force open dropdown onClick

html

javascript

jquery

angularjs

drop-down-menu