Yii框架中如何将默认展开的菜单转换为Dropdown下拉菜单？

• 现有Yii框架生成的菜单默认保持展开状态，无法收起，需要调整为可交互的Dropdown下拉菜单
• 目标实现效果：
  
• 现有菜单配置代码如下：

array('visible'=>$this->AA('withdrawal'),'tag'=>'withdrawal',
   'label'=> '<i class="fa fa-university"></i>'.Yii::t("default",'Withdrawal'),
   'itemOptions'=>array('class'=>''), 
   'items'=>array(        
     array('visible'=>$this->AA('incomingwithdrawal'),'tag'=>'incomingwithdrawal',
     'label'=>'<i class="fa fa-paypal"></i>'.Yii::t("default","Withdrawal List"), 
     'url'=>array('admin/incomingwithdrawal')),                                
     
      array('visible'=>$this->AA('withdrawalsettings'),'tag'=>'withdrawalsettings',
      'label'=>'<i class="fa fa-paypal"></i>'.Yii::t("default","Settings"), 
     'url'=>array('admin/withdrawalsettings')),                                   
 )),

根据项目是否引入Bootstrap，分两种场景调整：

场景1：项目已加载Bootstrap资源（绝大多数Yii后台项目的默认情况） #

直接修改菜单配置，补全下拉菜单需要的类和触发属性即可，修改后的代码如下：

array(
    'visible'=>$this->AA('withdrawal'),
    'tag'=>'withdrawal',
    // 父级菜单加下拉箭头标识
    'label'=> '<i class="fa fa-university"></i>'.Yii::t("default",'Withdrawal').' <b class="caret"></b>',
    // 给父级菜单项添加dropdown类
    'itemOptions'=>array('class'=>'dropdown'),
    // 给父级菜单链接添加下拉触发属性
    'linkOptions'=>array('class'=>'dropdown-toggle', 'data-toggle'=>'dropdown', 'role'=>'button', 'aria-expanded'=>'false'),
    // 给子菜单容器添加dropdown-menu类，默认隐藏
    'submenuOptions'=>array('class'=>'dropdown-menu'),
    'items'=>array(        
        array(
            'visible'=>$this->AA('incomingwithdrawal'),
            'tag'=>'incomingwithdrawal',
            'label'=>'<i class="fa fa-paypal"></i>'.Yii::t("default","Withdrawal List"), 
            'url'=>array('admin/incomingwithdrawal')
        ),                                
        array(
            'visible'=>$this->AA('withdrawalsettings'),
            'tag'=>'withdrawalsettings',
            'label'=>'<i class="fa fa-paypal"></i>'.Yii::t("default","Settings"), 
            'url'=>array('admin/withdrawalsettings')
        ),                                   
    )
),

配置修改后菜单默认收起，点击父级菜单即可展开下拉选项。

场景2：项目未引入Bootstrap #

需要手动添加CSS和JS实现下拉交互：

1. 参考上述配置写法，给父级菜单项、子菜单加上自定义类名
2. 添加CSS样式设置子菜单默认隐藏：

/* 下拉菜单父级设置相对定位 */
.withdrawal-menu-item {
    position: relative;
}
/* 子菜单默认隐藏，绝对定位到父级下方 */
.withdrawal-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    /* 以下样式可根据自身UI设计调整 */
    min-width: 160px;
    padding: 5px 0;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

3. 添加JS实现点击切换展开/收起：

document.querySelector('.withdrawal-menu-item > a').addEventListener('click', function(e){
    e.preventDefault();
    const submenu = this.nextElementSibling;
    submenu.style.display = submenu.style.display === 'block' ? 'none' : 'block';
})

内容的提问来源于stack exchange，提问作者nexti