Выпадающее меню Bootstrap

Я знаю, что есть много примеров кода/вопросов, подобных этому. Я много искал и пытался копировать/вставлять много кода. Ничего не получилось. Так жаль, если дубликат или что-то в этом роде.Выпадающее меню Bootstrap

В любом случае, я пытаюсь добавить раскрывающееся меню бутстрапа в свой фиксированный навигатор. Я не хочу, чтобы выпадающее меню было активировано onclick, поэтому я удалил каретку.

Вот мой (часть) мой код:

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <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="http://getbootstrap.com/examples/navbar-fixed-top/#">SDK Tests Status</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <span class="glyphicon glyphicon-folder-open room-icn"></span> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Rooms</a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li class="dropdown-header">Nav header</li> 
      <li><a href="#">Separated link</a></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 


    </div><!--/.nav-collapse --> 
    </div> 
</div>

Кто-нибудь? Благодаря !

источник

2014-02-19 FunJoy

Я не могу воспользоваться этим. У Райана Олсона есть учебник here. Добавьте CSS в ваш .css-файл или свою голову. Добавьте JavaScript в самую нижнюю часть страницы до </body>. Поместите HTML в тело страницы.

CSS:

.navbar-nav .dropdown:hover > .dropdown-menu { 
    display: block; 
} 
.navbar-nav .dropdown:hover > a[data-toggle=dropdown] + .dropdown-menu { 
    display: none; 
} 
.navbar-nav .dropdown.open > a[data-toggle=dropdown] + .dropdown-menu { 
    display: block; 
}

JavaScript:

<script type="text/javascript"> 
$(function() { 
    var $win = $(window); 
    $win.resize(function() { 
     if ($win.width() > 768) 
      $(".navbar-nav > .dropdown > a").attr("data-toggle", ""); 
     else 
      $(".navbar-nav > .dropdown > a").attr("data-toggle", "dropdown"); 
    }).resize(); 
    $(".dropdown-menu").find("input, button").each(function() { 
     $(this).click(function (e) { 
      e.stopPropagation(); 
     }); 
    }); 
}); 
</script>

HTML:

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <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="http://getbootstrap.com/examples/navbar-fixed-top/#">SDK Tests Status</a> 
    </div> 
    <div class="navbar-collapse collapse"> 
     <ul class="nav navbar-nav"> 
     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-folder-open room-icn"></span> Rooms</a> 
      <ul class="dropdown-menu"> 
      <li><a href="#">Action</a></li> 
      <li><a href="#">Another action</a></li> 
      <li><a href="#">Something else here</a></li> 
      <li class="divider"></li> 
      <li class="dropdown-header">Nav header</li> 
      <li><a href="#">Separated link</a></li> 
      <li><a href="#">One more separated link</a></li> 
      </ul> 
     </li> 
     </ul> 
    </div><!--/.nav-collapse --> 
    </div> 
</div>

Целая страница:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     <meta charset="utf-8"> 
     <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
     <!--[if lt IE 9]> 
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> 
     <![endif]--> 
     <style type="text/css"> 
      .navbar-nav .dropdown:hover > .dropdown-menu { 
       display: block; 
      } 
      .navbar-nav .dropdown:hover > a[data-toggle=dropdown] + .dropdown-menu { 
       display: none; 
      } 
      .navbar-nav .dropdown.open > a[data-toggle=dropdown] + .dropdown-menu { 
       display: block; 
      } 
     </style>  
    </head> 

    <body> 

    <div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
      <div class="container"> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <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="http://getbootstrap.com/examples/navbar-fixed-top/#">SDK Tests Status</a> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-folder-open room-icn"></span> Rooms</a> 
        <ul class="dropdown-menu"> 
        <li><a href="#">Action</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider"></li> 
        <li class="dropdown-header">Nav header</li> 
        <li><a href="#">Separated link</a></li> 
        <li><a href="#">One more separated link</a></li> 
        </ul> 
       </li> 
       </ul> 
      </div><!--/.nav-collapse --> 
      </div> 
     </div> 

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 

    <script type="text/javascript"> 
     $(function() { 
      var $win = $(window); 
      $win.resize(function() { 
       if ($win.width() > 768) 
        $(".navbar-nav > .dropdown > a").attr("data-toggle", ""); 
       else 
        $(".navbar-nav > .dropdown > a").attr("data-toggle", "dropdown"); 
      }).resize(); 
      $(".dropdown-menu").find("input, button").each(function() { 
       $(this).click(function (e) { 
        e.stopPropagation(); 
       }); 
      }); 
     }); 
    </script> 
    </body> 
</html>

Here is a bootply of it.

источник

2014-02-19 18:39:53 theRyanMark

Работы! Благодаря ! – FunJoy

Добро пожаловать. Глупо, для этого нет встроенного варианта. – theRyanMark

Не удалось ответить more – FunJoy

Выпадающее меню Bootstrap

ответ

Смежные вопросы