DEMO

Question

在我网站的移动部分，我想显示子菜单，而不必点击/悬停父母。

HTML：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
    <li class="dropdown "><a class="dropdown-toggle" href="/">Home</a>
        <ul class="dropdown-menu" >
            <li><a href="/home/news/">News</a></li>
            <li><a href="/home/contact/">Contact</a>
            <li><a href="/home/about-us/">About us</a></li>
        </ul>
    <li>
</ul>
</div>

我想显示子菜单，而不必点击或悬停父级。我正在使用的代码是CSS，Javascript和Jquery，所以我可以使用它们中的一个（或全部）来实现。使用最新版本的Bootstrap制作网站（3.3.6）。

EDIT JSFiddle：https://jsfiddle.net/uvd5jp0o/

在这里你还可以看到我在jquery中悬停显示子菜单。

Answer 1

您可以添加 visible-xs - 类，以便在移动浏览器中显示导航

查看引导程序网站

http://getbootstrap.com/css/

因此，对于超小（xs）屏幕，例如，可用 .visible- - 类是：.visible-xs-block，.visible-xs-inline，和。可见-XS-直列块。

Answer 2

或者您可以在显示菜单时设置宽度，如下所示：

window.onload = checkWindowSize;
window.onresize = checkWindowSize;

function checkWindowSize() {
  if ($(window).width() < "768") { //example width of 768px
    $("#bs-example-navbar-collapse-1 li").addClass('open');
  }else{
    $("#bs-example-navbar-collapse-1 li").removeClass('open');
  }
}

或者您可以在bootstrap中使用内置类并将其添加到您的ul元素中，如下所示：

<ul class="dropdown-menu visible-xs">

代码将检查窗口宽度，仅在宽度小于768px

时作出反应

Answer 3

试试这个：

DEMO

使用一些脚本：）

HTML：

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
     <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="navbar-collapse" id="bs-example-navbar-collapse-1">
       <ul class="nav navbar-nav navbar-right">
      <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul id="Drp" class="dropdown-menu visible-xs">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

SCRIPT：

$(document).ready(function(){

 CheckScreenSize();
});

window.onresize = function(event) {
  CheckScreenSize();
};


function CheckScreenSize(){

 if($(window).width()<768){
  $("#Drp").addClass('visible-xs');
  }else
  {
  $("#Drp").removeClass('visible-xs');
  }
}

Bootstrap始终显示子菜单

3 个答案:

DEMO