javascript - Multiple buttons in Twitter Bootstrap show the same dropdown - why? -
i trying put little dropdown menu bootstrap. put sample on jsfiddle here.
the idea have each button trigger different dropdown list, clicking on file gives dropdown containing new , close, clicking on edit gives dropdown containing copy, paste , undo , on.
however, same dropdown buttons. surely must have done wrong.
i had @ this jsfiddle, linked this stackoverflow question, doesn't seem work - no dropdown shows @ when clicking.
any suggestion?
here copy of html:
<div id="mainmenubar" class="btn-group"> <button class="btn" href="#" onclick="alert('hello!');">menu</button> <button href="#" class="btn dropdown-toggle" role="button" data-toggle="dropdown">file</button> <ul id="filemenuselector" class="dropdown-menu"> <li><a href="#">new</a></li> <li><a href="#">close</a></li> </ul> <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">edit</button> <ul id="editmenuselector" class="dropdown-menu"> <li><a href="#">copy</a></li> <li><a href="#">paste</a></li> <li><a href="#">undo</a></li> </ul> <button href="#" class="btn dropdown-toggle" data-toggle="dropdown">debug</button> <ul id="debugmenuselector" class="dropdown-menu"> <li><a href="#">some debug</a></li> <li><a href="#">show xml</a></li> <li><a href="#">show log</a></li> <li><a href="#">shut down lot</a></li> </ul> </div>
i think need use links (anchors) inside buttons trigger dropdowns instead...
<button class="btn btn-group"> <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> file <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#">new</a></li> <li><a href="#">close</a></li> </ul> </button>
here's working demo
edit: here's alternate version inside .btn-toolbar each dropdown inside own btn-group. works in firefox: http://bootply.com/61019
Comments
Post a Comment