如何解决Yii2中Bootstrap4多级下拉菜单的复杂实现问题，使用kartik-v/yii2-bootstrap4-dropdown让导航更灵活-composer-PHP中文网

如何解决Yii2中Bootstrap4多级下拉菜单的复杂实现问题，使用kartik-v/yii2-bootstrap4-dropdown让导航更灵活

聖光之護

发布： 2025-09-22 10:16:30

原创

666人浏览过

可以通过一下地址学习composer：学习地址

想象一下，你正在开发一个复杂的企业级yii2应用，需要一个功能丰富、层级清晰的导航菜单。用户希望能够通过主菜单进入二级子菜单，甚至三级子菜单，以便快速访问特定功能模块。然而，当你开始着手实现时，很快就会发现原生的bootstrap 4下拉菜单在处理多级嵌套时显得力不从心。

我遇到的难题：原生Bootstrap 4下拉菜单的局限

最初，我尝试使用Yii2自带的

yii\bootstrap4\Nav

登录后复制

和

yii\bootstrap4\NavBar

登录后复制

组件来构建导航。对于简单的单级下拉菜单，它们表现良好。但当产品经理提出需要“无限级”嵌套的子菜单时，我的眉头就皱了起来。原生的Bootstrap 4下拉菜单并不直接支持鼠标悬停时自动展开多级子菜单，或者说，它的默认行为并没有提供这种“开箱即用”的便利。

这意味着我需要：

手动编写复杂的HTML结构： 为每一层子菜单添加额外的
```
div
```
登录后复制
和
```
ul
```
登录后复制
标签。
自定义CSS样式： 调整子菜单的定位、显示方式，确保在不同屏幕尺寸下都能正常显示。
编写JavaScript代码： 处理鼠标悬停或点击事件，控制子菜单的显示与隐藏，同时还要考虑点击外部区域时关闭菜单的逻辑。
维护兼容性： 确保我的自定义代码在不同的浏览器和设备上都能正常工作，并且在Bootstrap 4或Yii2升级后不会出现问题。

这不仅耗费了大量宝贵的开发时间，而且代码变得臃肿、难以维护，稍有不慎就可能引入UI上的Bug。我急需一个更优雅、更高效的解决方案。

Composer：我的救星，引入

kartik-v/yii2-bootstrap4-dropdown

登录后复制

正当我为此焦头烂额时，我突然想到了Composer——PHP的依赖管理工具。我决定去Packagist上搜索是否有针对Yii2和Bootstrap 4的增强型下拉菜单扩展。果然，我找到了

kartik-v/yii2-bootstrap4-dropdown

登录后复制

这个宝藏！

这个扩展由著名的Yii2扩展开发者 Kartik Visweswaran 维护，它专门为Yii2框架增强了Bootstrap 4.x的下拉菜单功能，最吸引我的就是它对嵌套子菜单的完美支持。

通过Composer安装它简直是小菜一碟：

<pre class="brush:php;toolbar:false;">$ php composer.phar require kartik-v/yii2-bootstrap4-dropdown "@dev"

登录后复制

或者直接在你的

composer.json

登录后复制

文件中添加：

<pre class="brush:php;toolbar:false;">"kartik-v/yii2-bootstrap4-dropdown": "@dev"

登录后复制

然后运行

composer update

登录后复制

。Composer会自动处理所有依赖，确保我的项目拥有正确版本的扩展。这让我省去了手动下载、解压、配置的繁琐步骤，也避免了版本冲突的风险。

如何使用

kartik-v/yii2-bootstrap4-dropdown

登录后复制

解决问题

安装完成后，集成到我的Yii2应用中变得异常简单。

kartik-v/yii2-bootstrap4-dropdown

登录后复制

提供了一个增强的

Dropdown

登录后复制

小部件，可以直接替换Yii2默认的Bootstrap 4下拉菜单组件。

采风问卷

采风问卷是一款全新体验的调查问卷、表单、投票、评测的调研平台，新奇的交互形式，漂亮的作品，让客户眼前一亮，让创作者获得更多的回复。

查看详情

以下是几种常见的用法，展示了它是如何轻松实现多级导航的：

1. 在NavBar中集成多级下拉菜单

这是最常见的场景，将多级菜单集成到应用的顶部导航栏中。只需在

Nav::widget

登录后复制

的

dropdownClass

登录后复制

属性中指定

Dropdown::classname()

登录后复制

即可。

<pre class="brush:php;toolbar:false;">use yii\bootstrap4\NavBar;
use yii\bootstrap4\Nav;
use kartik\bs4dropdown\Dropdown; // 注意这里引入的是 kartik 的 Dropdown
use yii\helpers\Html;

NavBar::begin(['brandLabel' => '我的应用']);
echo Nav::widget([
    'items' => [
        ['label' => '首页', 'url' => ['/site/index']],
        [
            'label' => '产品中心', // 一级菜单
            'items' => [
                ['label' => '产品分类 A', 'url' => '/products/category-a'],
                ['label' => '产品分类 B', 'url' => '#'],
                [
                     'label' => '更多产品', // 二级菜单
                     'items' => [
                         ['label' => '子产品 3.1', 'url' => '/products/sub-3-1'],
                         ['label' => '子产品 3.2', 'url' => '#'],
                         [
                             'label' => '高级选项', // 三级菜单
                             'items' => [
                                 ['label' => '选项 3.3.1', 'url' => '/advanced/option-1'],
                                 ['label' => '选项 3.3.2', 'url' => '#'],
                             ],
                         ],
                     ],
                 ],
            ],
        ],
        ['label' => '关于我们', 'url' => ['/site/about']],
    ],
    'dropdownClass' => Dropdown::classname(), // 使用 kartik 的自定义下拉菜单
    'options' => ['class' => 'navbar-nav mr-auto'],
]);
NavBar::end();

登录后复制

2. 独立的多级下拉按钮

如果你需要在页面中的任何位置创建一个独立的、带有多级子菜单的下拉按钮，也可以直接使用

Dropdown::widget()

登录后复制

。

<pre class="brush:php;toolbar:false;"><?php 
use \yii\helpers\Html;
use kartik\bs4dropdown\Dropdown;
?>
<div class="dropdown">
    <?php
        echo Html::button('操作菜单', [
           'id' => 'actionMenuButton',
           'class' => 'btn btn-primary dropdown-toggle', // 使用 btn-primary 让按钮更显眼
           'data-toggle' => 'dropdown',
           'aria-haspopup' => 'true',
           'aria-expanded' => 'false'
        ]);
        echo Dropdown::widget([
            'items' => [
                ['label' => '编辑', 'url' => '/item/edit'],
                ['label' => '删除', 'url' => '#'],
                [
                     'label' => '更多操作', 
                     'items' => [
                         ['label' => '导出数据', 'url' => '/item/export'],
                         ['label' => '打印报告', 'url' => '#'],
                         [
                             'label' => '高级设置', 
                             'items' => [
                                 ['label' => '设置项 A', 'url' => '/settings/a'],
                                 ['label' => '设置项 B', 'url' => '#'],
                             ],
                         ],
                     ],
                 ],
            ],
            'options' => ['aria-labelledby' => 'actionMenuButton']
        ]);
    ?>
</div>

登录后复制

3. 使用

ButtonDropdown

登录后复制

小部件

kartik-v/yii2-bootstrap4-dropdown

登录后复制

还提供了一个

ButtonDropdown

登录后复制

小部件，它将按钮和下拉菜单组合在一起，使用起来更加便捷。

<pre class="brush:php;toolbar:false;">use \yii\helpers\Html;
use kartik\bs4dropdown\ButtonDropdown;
echo ButtonDropdown::widget([
    'label' => '快捷入口',
    'dropdown' => [
        'items' => [
            ['label' => '我的账户', 'url' => '/profile'],
            ['label' => '消息中心', 'url' => '#'],
            [
                 'label' => '系统管理', 
                 'items' => [
                     ['label' => '用户管理', 'url' => '/admin/users'],
                     ['label' => '角色权限', 'url' => '#'],
                     [
                         'label' => '日志查看', 
                         'items' => [
                             ['label' => '操作日志', 'url' => '/admin/logs/op'],
                             ['label' => '错误日志', 'url' => '#'],
                         ],
                     ],
                 ],
             ],
        ],
    ],
    'buttonOptions' => ['class'=>'btn-info'] // 可以自定义按钮样式
]);

登录后复制

通过这些例子，可以看到