Search code examples
javascripthtmltwitter-bootstrap-3drop-down-menuhref

Bootstrap dropdown toggling wrong element if a href contains id of existing element, is it a bug?


I have a dropdown menu that is usable even without JS enabled. For that I've created a copy of the menu in the footer with all submenus opened and added <a name="nojs-menu"></a> on top of that menu and have first level of the main menu point to that anchor: <a href="#nojs-menu" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">. This way whenever JS wasn't executed my main menu will just drop users to the footer where all submenus are opened.

Now, HTML5 validator recommends replacing name attributes with id. But as soon as I do that dropdown menus stop working because they toggle open class not on submenu but on the anchor with id nojs-menu. Is it a bug or did I misunderstood something?

Bootstrap version in 3.3.5.


Solution

  • In this case all submenu items need an id and this ids must be in data-targets of top menu buttons.