title: Bootstrap open link when clicked on dropdown menu button
body: <p>I used bootstrap in my main menu and since my project has a lot of pages, subpages and sub-subpages I used the bootstrap dropdownmenu to navigate through this.</p>
  
  <p>My client now wants to be able to go to the link associated with the dropdown-button itself too, rather than the childen. My client has text on a page called 'customer support', and text on subpages (children). Ideally I want the user to first click a dropdownmenu button (ex. "Customer service"), and a dropdownmenu opens up (which Bootstrap does), and on a second click be able to go to the link associated with that dropdownmenu button (ex. "/customer-service").</p>
  
  <p>I'll share some code to make it a bit more understandable:</p>
  
  <pre><code>&lt;body&gt;
  &lt;nav class="navbar navbar-default"&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="dropdown"&gt; &lt;a href="/customer-service" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
  
                      &lt;!-- click this menu-button once, and the submenu below opens, click this menu-button twice and you go to /customer-service --&gt;
                      &lt;ul class="dropdown-menu" role="menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li class="dropdown"&gt; &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"&gt;Dropdown &lt;span class="caret"&gt;&lt;/span&gt;&lt;/a&gt;
  
                      &lt;ul class="dropdown-menu" role="menu"&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Something else here&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li class="divider"&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#"&gt;Separated link&lt;/a&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>
      <a href="http://jsfiddle.net/kozog9rx/2/" rel="nofollow">http://jsfiddle.net/kozog9rx/2/</a></p>
  
  <p><em>(be sure to read the comment in the HTML and give the "Result-view" enough space/width so the menu appears)</em></p>