jquery - Bootstrap v3 Navbar-toggle with multiple data-targets don't toggle class "collapsed" -
the data-target attribute accepts multiple css selectors apply collapse to. if 1 selector used, class "collapsed" of navbar-toggle toggling uncollapsing. if multiple selectors used, behavior don't works. in case class "collapsed" present. need change of class "collapsed" in navbar-toggle.
it great if help.
<div id="mainnav"> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar, #userpanel" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"> <a href="#"> <span class="navicon glyphicon glyphicon-th" aria-hidden="true"></span> <span class="navtext">dashboard</span> </a> </li> <li> <a href="#"> <span class="navicon glyphicon glyphicon-fire" aria-hidden="true"></span> <span class="navtext">about</span> </a> </li> </ul> </div> </nav> </div> <div id="userpanel" class="navbar-collapse collapse"> <ul> <li>max muster | 101945</li> <li><a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> logout</a></li> </ul>
wrap both in div id
, use class
both data's given code try using data-parent collapse both , , let me know working you,
<div id="wraper"> <div id="mainnav"> <nav class="navbar navbar-inverse"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-parent="#wraper" data-target=".navbar_collapsed_data" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">toggle navigation</span> <span class="icon-bar top-bar"></span> <span class="icon-bar middle-bar"></span> <span class="icon-bar bottom-bar"></span> </button> </div> <div class="navbar_collapsed_data navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"> <a href="#"> <span class="navicon glyphicon glyphicon-th" aria-hidden="true"></span> <span class="navtext">dashboard</span> </a> </li> <li> <a href="#"> <span class="navicon glyphicon glyphicon-fire" aria-hidden="true"></span> <span class="navtext">about</span> </a> </li> </ul> </div> </nav> </div> <div class="navbar_collapsed_data navbar-collapse collapse"> <ul> <li>max muster | 101945</li> <li><a href="#"><span class="glyphicon glyphicon-off" aria-hidden="true"></span> logout</a></li> </ul> </div>
Comments
Post a Comment