0

In following example, dropdown menu works. It will fail when we rename the bug2 to bug(same as href in <a>), check it in jsbin 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
</head>
<body>
<div class="navbar navbar-default" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" 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="#">Bootstrap theme</a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#bug" class="dropdown-toggle" data-toggle="dropdown">
             Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>

<div id="bug2">main</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>

SOLVED

For keep same style, the corrected version is replace this line

<a href="#bug" class="dropdown-toggle" data-toggle="dropdown">

with

<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Daniel YC Lin
  • 15,050
  • 18
  • 63
  • 96

1 Answers1

0

The dropdown link will work no matter what you have listed as the href= as long as that is not pointing to an existing id on the page.

So for example all of these work and the user will have the same experience whether href="#", href="#blah", or href="#hello. This is because neither blah nor hello is an id that is in use on the page.

The id bug is being used on the page. When you introduce the href="#bug" it is pointing to the <div id="bug">main</div>, and nothing happens because that is simply a plain text div.

Dan
  • 9,391
  • 5
  • 41
  • 73
  • I think ` – Daniel YC Lin Sep 05 '14 at 03:03
  • 2
    Because you want the element to be styled like a link. Also you can read more about that here: http://stackoverflow.com/questions/4855168/what-is-href-and-why-is-it-used. I guess you could simply eleminate the `href="#"` altogether though. – Dan Sep 05 '14 at 03:13