title: Bootstrap multi-level menu and tab panels
body: <p>I have this multi-level menu that operates a Bootstrap tab panel, kind of like a TabControl in C#.</p>
  
  <p>I'm having difficulty with this as the menu items do not get de-slected when a new one is selected and then the item can't be selected again.<br>
  It is similar to this post:
  <a href="https://stackoverflow.com/questions/33229791/bootstrap-4-dropdown-tab-items-can-only-be-selected-once">Bootstrap 4: dropdown tab items can only be selected once</a></p>
  
  <p>I tried the workaround and it does not work, in fact, it never gets fired.
  At a loss as to what I'm doing wrong.</p>
  
  <p>This is based on thie code here:
  <a href="https://codepen.io/wizly/pen/BlKxo" rel="nofollow noreferrer">https://codepen.io/wizly/pen/BlKxo</a></p>
  
  <p>Here is a Pen showing the behavior:
  <a href="https://codepen.io/anon/pen/eGRrpx" rel="nofollow noreferrer">https://codepen.io/anon/pen/eGRrpx</a></p>
  
  <pre><code>&lt;div class="navbar navbar-default navbar-fixed-top" role="navigation"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;div class="collapse navbar-collapse"&gt;
              &lt;ul class="nav navbar-nav"&gt;
                  &lt;li&gt;&lt;a href="/Home/Index"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;CNP&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#CNPAU" data-toggle="tab"&gt;CNPAU&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#CNPPAC" data-toggle="tab"&gt;CNPPA&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#CNPCH" data-toggle="tab"&gt;CNPCH&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#CNPV" data-toggle="tab"&gt;CNPV&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;Set&lt;b class="caret"&gt;&lt;/b&gt;&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                          &lt;li&gt;&lt;a href="#SetCB" data-toggle="tab"&gt;CB&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#SetRCB" data-toggle="tab"&gt;RCB&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="#SetRCUB" data-toggle="tab"&gt;RCUB&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt; 
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="exTab1" class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div id="tabs" class="col-md-12"&gt;
        &lt;ul class="nav nav-pills hide"&gt;
          &lt;li class="active"&gt;
            &lt;a href="#CNPAU" data-toggle="tab"&gt;CNPAU&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#CNPPPAC" data-toggle="tab"&gt;CNPPPAC&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#CNPCH" data-toggle="tab"&gt;CNPCH&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#CNPV" data-toggle="tab"&gt;CNPV&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#SetCB" data-toggle="tab"&gt;SetCB&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#SetRRCB" data-toggle="tab"&gt;SetRRCB&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#SetRRCUB" data-toggle="tab"&gt;SetRRCUB&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
        &lt;div class="tab-content"&gt;
          &lt;div class="row"&gt;&amp;nbsp;&lt;/div&gt;
          &lt;div class="tab-pane" id="CNPAU"&gt;
            &lt;div class="row"&gt;&amp;nbsp;&lt;/div&gt;
            &lt;h3&gt;CNPAU&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="CNPPPAC"&gt;
            &lt;div class="row"&gt;&amp;nbsp;&lt;/div&gt;
            &lt;h3&gt;CNPPPAC&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="CNPCH"&gt;
            &lt;div class="row"&gt;&amp;nbsp;&lt;/div&gt;
            &lt;h3&gt;CNPCH&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="CNPV"&gt;
            &lt;div class="row"&gt;&amp;nbsp;&lt;/div&gt;
            &lt;h3&gt;CNPV&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="SetCB"&gt;
            &lt;div class="row"&gt;&amp;nbsp;&lt;/div&gt;
            &lt;h3&gt;SetCB&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="SetRRCB"&gt;
            &lt;div class="row"&gt;&amp;nbsp;&lt;/div&gt;
            &lt;h3&gt;SetRRCB&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="tab-pane" id="SetRRCUB"&gt;
            &lt;div class="row"&gt;&amp;nbsp;&lt;/div&gt;
            &lt;h3&gt;SetRRCUB&lt;/h3&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>