1

正如标题所说，我已经看到了自举下拉样本，它们data-toggle="dropdown"是class="dropdown-menu"兄弟姐妹。

所以，我想知道是否可以通过使用data-target或aria-labelledby属性（不添加任何js）将下拉菜单包装在另一个div中时切换下拉菜单。

就像这个例子一样JSFIDDLE LINK

注意：如果您删除“#LIST_WRAPPER”，您将获得工作示例。

4

1 回答 1

3

首先，它与 data-target 或 aria 无关。它所有简单的 css 和 jquery 使下拉菜单在引导程序中工作。如果我们想将它们分开，我们有两个选择：-

  1. 在点击时手动切换菜单的 Javascript/Jquery 方式（我了解到您不想这样做）。
  2. CSS方式。

引导程序所做的只是将一个open类切换到触发器的父级（如果您查看代码，您可以看到）。

BS JS 部分。

    $parent = getParent($this)
    isActive = $parent.hasClass('open')
    clearMenus()
    if (!isActive) {
        $parent.toggleClass('open')
    }

一旦完成，CSS 就会接管，因为根据 BS 示例，菜单自然是在触发器本身的父级内部，因此这种样式（直接子选择器）会在open附加到它的类时应用到它。

BS CSS部分。

.open>.dropdown-menu {
   display: block; /*Makes the element visible*/
}

因此，根据您的要求，我们需要覆盖它以指定我们自己的样式。

.open .dropdown-menu {
       display: block; /*Makes the element visible*/
       top:auto; /*Rest the top, according to the current style top is positioned based on the parent but that doesn exist anymore, so need to reset it or play around with it*/
    }

到这里为止一切都很好。下一个问题是未应用字体大小，它为零。理想情况下，它来自 BS CSS 下拉菜单的以下规则：-

.btn-group>.btn,
.btn-group>.dropdown-menu,
.btn-group>.popover
 {font-size:14px;}

这很明显，因为 .dropdown-menu 是.btn-group基于根容器的直接子级，即<div class="dropdown btn-group">. SO 2修复它的方法是 btn-group从容器div中删除或设置如下规则：-

.btn-group .dropdown-menu {
    font-size:14px;
}

所以总共要添加2条规则：-

.open .dropdown-menu {
    display:block;
    top:auto;
}
.btn-group .dropdown-menu {
    font-size:14px;
}

这是一个working Demo.

于 2013-05-11T03:12:55.863 回答