Hi,
I'm trying to work out how to toggle the navbar you see in Bootstrap 3.0.0.
Its fine when you look at > 768px, but when you are on smaller you get the
"compressed" version (i.e when you click the "show" link, which then pulls
down the menu). That all works fine, but the problem I'm having is how to
hide this menu again programatically?
<!-- Fixed navbar -->
> <div class="navbar navbar-default navbar-fixed-top">
> <div class="container">
> <div class="navbar-header">
> <button type="button" class="navbar-toggle"
> data-toggle="collapse" data-target=".navbar-collapse">
> <span class="icon-bar"></span>
> <span class="icon-bar"></span>
> <span class="icon-bar"></span>
> </button>
> <a class="navbar-brand go_home" href="javascript: void(0);"><img
> src="./new/steampunklogosmall.png" id="logo" /></a>
> </div>
> <div class="navbar-collapse collapse"> <!---->
> <ul class="nav navbar-nav">
>
> <li class="dropdown">
> <a href="#" class="dropdown-toggle"
> data-toggle="dropdown">Menu <b class="caret"></b></a>
> <ul class="dropdown-menu">
> <li><a href="javascript:void(0)"
> class="following">Following</a></li>
> <li><a href="javascript:void(0)" class="myorders">My
> Orders</a></li>
> <li><a href="javascript: void(0);"
> class="search_btn">Search</a></li>
> <li><a href="javascript:void(0)"
> class="load_faq">FAQ</a></li>
>
> </ul>
> </li>
>
> <li class="dropdown">
> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
> By Subject <b class="caret"></b></a>
> <ul class="dropdown-menu">
> <li><a href="javascript: void(0);"
> class="go_home">All</a></li>
> <li><a href="javascript:void(0);" class="do_load_cat"
> rel="art_design">Art, Design</a></li>
> <li><a href="javascript:void(0);" class="do_load_cat"
> rel="library">Library</a></li>
> </ul>
> </li>
>
> <li class="dropdown">
> <a href="#" class="dropdown-toggle" data-toggle="dropdown">
> By Media <b class="caret"></b></a>
> <ul class="dropdown-menu">
> <li><a href="javascript: void(0);"
> class="go_home">All</a></li>
> <li><a href="javascript:void(0);" class="load_by_media"
> rel="aluminium">Aluminium</a></li>
> <li><a href="javascript:void(0);" class="load_by_media"
> rel="brass">Brass</a></li>
> <li><a href="javascript:void(0);" class="load_by_media"
> rel="bronze">Bronze</a></li>
> </ul>
> </li>
> </ul>
> <ul class="nav navbar-nav navbar-right">
> <li><a href="javascript:void(0);" class="top-right-nav-btn
> profile"><b class="icon icon-user"></b> Profile</a></li>
> <li><a href="javascript:void(0);" class="logout
> top-right-nav-btn" ><b class="icon icon-off"></b> Logout</a></li>
> </ul>
> </div><!--/.nav-collapse -->
> </div>
> </div>
>
As an example, I use this to "close" a dropdown menu item when clicked:
$('.dropdown.open .dropdown-toggle').dropdown('toggle');
I have tried doing:
$('button.navbar-toggle.collapsed').click();
...but it still stays open when you click on a link.
Has anyone managed to do this?
TIA
Andy
--
You received this message because you are subscribed to the Google Groups
"twitter-bootstrap" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/groups/opt_out.
