Question

我们的导航菜单具有三个级别，如下所示：

在移动设备上查看该网站时，菜单会折叠成一个汉堡包按钮。当单击/触摸时，它将显示顶级菜单项，但是触摸其中的任何一项只会隐藏菜单。我已经用Google搜索，并没有找到太多帮助我的方法，这是2012年的一些旧帖子，当时的建议是黑客js，而在SO上则是这样的，其中海报的标签没有闭合并且带有引号（'“）类型的错误。我检查了我的代码，但我认为没有任何问题。我正在使用Liquid构建菜单，但我认为这与它无关。这是原始代码：

<nav class="navbar navbar-default navbar-fixed-top">

<div class="container-fluid">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/index.html"><img src="/assets/images/logos/prebid_final.png"></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">

            {% for item in site.data.dropdowns %}

            <li class="dropdown">

                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    {{ item.sectionName }}
                    <span class="caret" />
                </a> 

                <ul id="prebidDropDown" class="dropdown-menu">

                    {% for submenu in item.submenus %}

                    <li class="dropdown dropdown-submenu">
                        <a href="{{submenu.link}}">{{ submenu.title }}

                            {% if submenu.hasBubblePopOut == 1 %}
                                <span class="caret" />
                            {% endif %}
                        </a>

                        {% if submenu.hasBubblePopOut == 1 %}

                            <ul class="dropdown-menu">

                                {% for bubblePopOut in submenu.bubble %}

                                    <li><a href="{{bubblePopOut.link}}">{{bubblePopOut.title}}</a></li>

                                {% endfor %}

                            </ul>
                        {% endif %}
                    </li>

                    {% endfor %}
                </ul>

            </li>

            {% endfor %}

            <!-- end loop through top level nav-->   
        </ul>
        <!--end top level menu items-->         
    </div>
    <!--end navbar-->
</div>
<!--end container-->

我可以发布输出html（相当长）。

还有我的导航栏CSS：

    /* NavBar */

.navbar { 
    z-index:100
    font-family: 'Dosis', sans-serif;
}

.navbar-default {
  background-color: #FFFFFF;
  border-color: transparent;
  padding-top: 15px;
}

.navbar-default .navbar-brand {
  color: white;
}

.navbar-default .navbar-nav>li>a {
  color: #3498db;
  font-weight: 500;
  font-size: 24px;

}

.navbar-toggle {
  background: #fff;
}

.navbar-brand img { 
    max-width: 200px;
    max-height: 35px;
}

.navbar-brand{
    float:left;
    height:50px;
    padding:10px 15px;
    font-size:18px;
    line-height:20px}

/* DropDown*/

.dropdown-submenu {
  position: relative;
}
.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: -1px;
}
.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}
.dropdown-submenu:hover > a:after {
  border-left-color: #fff;
}
.dropdown-submenu.pull-left {
  float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
}

我可能丢失了一些东西，将不胜感激。

Jekyll和Bootstrap：仅移动设备上的Nav菜单可切换，不选择菜单项

0 个答案: