如何在没有 jquery 的情况下创建引导下拉菜单答案

【问题标题】：How to create bootstrap dropdown without jquery如何在没有 jquery 的情况下创建引导下拉菜单
【发布时间】：2020-09-29 20:39:57
【问题描述】：

我想在不使用 jquery 的情况下创建引导下拉菜单

<div class="dropdown">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
            Dropdown
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">HTML</a></li>
            <li><a href="#">CSS</a></li>
            <li><a href="#">JavaScript</a></li>
        </ul>
    </div>

请帮助如何做到这一点

【问题讨论】：

github.com/angular-ui/bootstrap/tree/master/src/dropdown可以帮到你吗？
能否提供更多细节？

标签： angularjs angular-ui-bootstrap

【解决方案1】：

记住将 ui-bootstrap 指令添加到 angular.module

HTML代码

    <ul uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-body">
    <li role="menuitem"><a href="#">Action</a></li>
    <li role="menuitem"><a href="#">Another action</a></li>
    <li role="menuitem"><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li role="menuitem"><a href="#">Separated link</a></li>
    </ul>

JS代码

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

    $scope.appendToEl = angular.element(document.querySelector('#dropdown-long- content'));
    });

【讨论】：

【解决方案2】：

我写了我的下拉菜单脚本 No Jquery No Bootstrap js，只有 bootstrap css，无论如何都很容易覆盖：

document.addEventListener('DOMContentLoaded', function () {
// -----Dropdown----------

// Rule: link.dropdown-link data-dropdown='dropdownIdentifier' div#dropdownIdentifier
let dropdowns = document.querySelectorAll('.dropdown-link');
for (dropdown of dropdowns) {
    dropdown.onclick = function (e) {
        let dropdownDiv = document.getElementById(dropdown.getAttribute('data-dropdown'))
        if (dropdownDiv.style.display == "block") {
            dropdownDiv.style.display = "none";
        } else {
            dropdownDiv.style.display = "block";
        }
    }
}
});

现在在 html 中：

<a class="dropdown-link" data-dropdown="dropdownId">Prodbox</a>
<div id="dropdownId" class="dropdown-menu">
1
2
3
</div>

注意，下拉菜单是引导类来设置它的样式，如果你不使用引导 css，你可以自己编写

【讨论】：