Question

我有一个bootstrap导航栏菜单。我的内容是：“菜单项”和“下拉项目”

在快速响应模式下，我想在不打开“下拉项目”内容的情况下打开“菜单项”

我的代码：

    <div class="navbar-header">

      <button type="button" data-toggle="collapse" data-target="#navbar-collapse-1" class="navbar-toggle">Menu</button>

      <button type="button" data-toggle="collapse" data-target="#navbar-collapse-2" class="navbar-toggle">Dropdown Item Content</button>        

      <a href="" class="navbar-brand">Brand</a>

    </div>


    <div id="navbar-collapse-1" class="navbar-collapse collapse">

      <ul class="nav navbar-nav">

        <li class="dropdown"><a href="#">Menu Item</a></li>

        <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown Item <b class="caret"></b></a>

            <ul id="navbar-collapse-2" class="dropdown-menu">
                    <li>text</li>
            </ul>

        </li>

      </ul>

    </div>


</div>

**

的jsfiddle

https://jsfiddle.net/mj8qgakz/

**

- 在响应模式下查看：当我点击“菜单”并点击“下拉项目内容”后，内容正在打开。

我希望在不点击“菜单”

的情况下实现相同目标

是否可以在bootstrap中使用？

Answer 1

如果您只想隐藏手机上的菜单项，请执行以下操作：

<li class="dropdown hidden-xs"><a href="#">Menu Item</a></li>

如果我理解了这个问题......不确定

Answer 2

你不需要javascript或jquery来处理它。它只能通过CSS来实现。

这是更新的小提琴：JSFiddle

您可以将此媒体查询添加到您的CSS以控制600px下方的下拉菜单：

@media(max-width:600px){
  .dropdown-menu{
    height:auto;
    display:block;
    position:relative;
    background-color:transparent;
    box-shadow:none;
    border:0;
    margin-left:1em;
  }
  .caret{
    display:none;
  }
}

Bootstap：下拉子元素，而不在导航栏

2 个答案: