如何修改ui.bootstrap.dropdown以響應鼠標懸停在放置按鈕上？

我想使用ui.bootstrap.dropdown消息框以類似於ui.bootstrap.popover的方式顯示文本信息（不是鏈接）。我想修改這個指令，因爲它的功能是我需要的99％，而且我不想添加所有額外的彈窗需要的JS。如何修改ui.bootstrap.dropdown以響應鼠標懸停在放置按鈕上？

換句話說，我希望當用戶將鼠標懸停在向下箭頭上時顯示「下拉列表區域」，然後當他們將鼠標從下箭頭移開時離開。

有沒有一種方法可以將選項添加到ui.bootstrap.dropdown中，以便將鼠標懸停在箭頭上將顯示並隱藏下拉框。我不想在此框中放置任何鏈接。

我希望有人有一些想法，可以幫助我建議我怎麼可能改變這個指令，它自帶的ui.bootstrap.dropdown：

.directive('dropdownToggle', function() { 
    return { 
     require: '?^dropdown', 
     link: function (scope, element, attrs, dropdownCtrl) { 
      if (!dropdownCtrl) { 
       return; 
      } 

      dropdownCtrl.toggleElement = element; 

      var toggleDropdown = function (event) { 
       event.preventDefault(); 

       if (!element.hasClass('disabled') && !attrs.disabled) { 
        scope.$apply(function() { 
         dropdownCtrl.toggle(); 
        }); 
       } 
      }; 

      element.bind('click', toggleDropdown); 

      // WAI-ARIA 
      element.attr({ 'aria-haspopup': true, 'aria-expanded': false }); 
      scope.$watch(dropdownCtrl.isOpen, function (isOpen) { 
       element.attr('aria-expanded', !!isOpen); 
      }); 

      scope.$on('$destroy', function() { 
       element.unbind('click', toggleDropdown); 
      }); 
     } 
    };

來源

2015-02-06 Alan2

您需要的JS活躍的鼠標懸停功能 – Gericke 2015-02-06 11:36:42

嗯，我沒事具有的js，但寧願不要添加我在看到popover時看到的幾百行代碼，以及隨之而來的所有代碼。我希望的是，如果有一些方法來修改下拉指令。 – Alan2 2015-02-06 11:38:29

也許你想嘗試引導的工具提示功能 – Gericke 2015-02-06 11:43:44

這隻需要一點額外的CSS來實現。你沒有在問題中提供你的標記，所以我只是使用doc中的按鈕組示例。如果您提供特定的標記，我會相應地調整此答案。

@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"; 
 

 

 
.btn-group:hover>.dropdown-menu { 
 
    display: block; 
 
}

<!doctype html> 
 
<html ng-app="ui.bootstrap.demo"> 
 

 
<head> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script> 
 

 

 
</head> 
 

 
<body> 
 

 
    <div ng-controller="DropdownCtrl"> 
 

 
    <!-- Single button --> 
 
    <div class="btn-group" dropdown is-open="status.isopen"> 
 
     <button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled"> 
 
     Button dropdown <span class="caret"></span> 
 
     </button> 
 
     <ul class="dropdown-menu" role="menu"> 
 
     <li><a href="#">Action</a> 
 
     </li> 
 
     <li><a href="#">Another action</a> 
 
     </li> 
 
     <li><a href="#">Something else here</a> 
 
     </li> 
 
     <li class="divider"></li> 
 
     <li><a href="#">Separated link</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    <!-- Split button --> 
 
    <div class="btn-group" dropdown> 
 
     <button type="button" class="btn btn-danger">Action</button> 
 
     <button type="button" class="btn btn-danger dropdown-toggle" dropdown-toggle> 
 
     <span class="caret"></span> 
 
     <span class="sr-only">Split button!</span> 
 
     </button> 
 
     <ul class="dropdown-menu" role="menu"> 
 
     <li><a href="#">Action</a> 
 
     </li> 
 
     <li><a href="#">Another action</a> 
 
     </li> 
 
     <li><a href="#">Something else here</a> 
 
     </li> 
 
     <li class="divider"></li> 
 
     <li><a href="#">Separated link</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 

 
    </div> 
 
    <script> 
 
    angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 
 
    angular.module('ui.bootstrap.demo').controller('DropdownCtrl', function($scope, $log) { 
 
     $scope.items = [ 
 
     'The first choice!', 
 
     'And another choice for you.', 
 
     'but wait! A third!' 
 
     ]; 
 

 
     $scope.status = { 
 
     isopen: false 
 
     }; 
 

 
     $scope.toggled = function(open) { 
 
     $log.log('Dropdown is now: ', open); 
 
     }; 
 

 
     $scope.toggleDropdown = function($event) { 
 
     $event.preventDefault(); 
 
     $event.stopPropagation(); 
 
     $scope.status.isopen = !$scope.status.isopen; 
 
     }; 
 
    }); 
 
    </script> 
 
</body> 
 

 
</html>

真的那麼下拉作用是增加一個open類的父元素被點擊時。該引導CSS包含會導致子元素與.dropdown菜單類是有它的顯示屬性設置爲阻止規則：

.open>.dropdown-menu { 
    display: block; 
}

因此，爲了使菜單顯示，當你徘徊，你可以使用：CSS中的hover僞類可以做同樣的事情。在此示例中，我將規則附加到.btn組父元素，如下所示：

.btn-group:hover>.dropdown-menu { 
    display: block; 
}

來源

2015-02-09 21:49:42 jme11

這看起來就是我所需要的。我會試試這個，如果沒問題就會接受答案。謝謝你的幫助。 – Alan2 2015-02-10 06:52:01

這在PC上運行良好。但是，當我在iPad中打開頁面時，懸停下拉菜單變成了常規點擊下拉菜單（這很好，因爲iPad上沒有懸停），但問題在於選擇菜單後下拉菜單不會消失。要解僱它，你必須觸摸一些接受輸入的地方。任何解決方法？ – newman 2015-05-17 16:55:11

@miliu，我傾向於這樣做的方式是使用函數將摺疊變量設置爲摺疊狀態，並將其置於每個下拉元素的ng單擊中。你可以單獨傳遞它，如果你有其他一些已經在ng-click上的函數，例如：ng-click =「doSomething（）; collapseMenu（）」。如果沒有意義，發佈一個問題，我會回答或其他人會 - PS對不起之前刪除的評論，我只是回答了類似的問題，並得到了兩個混淆。 – jme11 2015-05-17 17:53:46

您可以修飾指令。

用這種方法你不必觸摸原始代碼，你可以保持原來的行爲。

HTML

<a href="#" class="open-dropdown-on-hover" dropdown-toggle></a>

angular.module('app').config(uiDropdownToggleDecorate); 

uiDropdownToggleDecorate.$inject = ['$provide']; 

function uiDropdownToggleDecorate($provide) { 
    // the trick here is you have to put 'Directive' after the original directive name 
    $provide.decorator('dropdownToggleDirective', uiDropdownToggleDecorator); 

    uiDropdownToggleDecorator.$inject = ['$delegate']; 

    function uiDropdownToggleDecorator($delegate) { 

     var directive = $delegate[0]; 
     var link = directive.link; 

     directive.compile = function() { 
      return function(scope, elem, attrs, ctrl) { 
       link.apply(this, [scope, elem, attrs, ctrl]); 

       function toggle() { 
        if (elem.hasClass('open-dropdown-on-hover')) { 
         scope.$apply(function() { 
          ctrl.toggle(); 
         }); 
        } 
       } 

       elem.hover(function() { 
        toggle(); 
       }, function() { 
        toggle(); 
       }); 
      }; 
     }; 

     return $delegate; 
    } 
}

來源

2015-06-05 14:36:59 cstuncsik

該指令在新版本中稱爲** uibDropdownToggleDirective **。對於我來說，當我嘗試選擇列表中的一個項目時，菜單會關閉。 – CSchulz 2016-08-31 13:10:44

只需添加一個範圍變量是開，然後添加屬性NG-鼠標懸停= 「status.isopen =真」

<div class="btn-group" uib-dropdown ng-mouseover="status.isopen = true" is-open="status.isopen">

替代品y，您可以使用ng-mouseenter =「status.isopen = true」和ng-mouseleave =「status.isopen = false」，但這有時會導致下拉關閉，因爲您進入下拉菜單。

來源

2016-02-05 20:03:55

這是我簡單但低保的解決方案。具有鼠標懸停和鼠標離開的頂層列表項是我最大的尤里卡，所以它們作用於羣：

<li uib-dropdown is-open="status.isopen" ng-mouseover="status.isopen = true" ng-mouseleave="status.isopen = false"> 
       <a ui-sref="abc">ABC</a> 
       <ul uib-dropdown-menu role="menu"> 
        <li role="menuitem"><a ui-sref="def">DEF</a></li> 
       </ul> 
      </li>

來源

2016-07-18 19:36:38

這是實現最簡單的方法！ – phegde 2016-10-14 18:45:01

如何修改ui.bootstrap.dropdown以響應鼠標懸停在放置按鈕上？

回答

相關問題