title: Bootstrap data-toggle="button" on non-button element
body: <p>simple (and probably easy) my code is as follows</p>
  
  <pre><code>&lt;div class="btn-group mod-group"&gt;
      &lt;button type="button" class="btn btn-default"&gt;Moderálás&lt;/button&gt;
      &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
          &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul class="dropdown-menu"&gt;
          &lt;li data-toggle="button" class="publicBtn&lt;?php echo ($s['public'] ? ' active' : '');?&gt;"&gt;&lt;a&gt;&lt;i class="icon-eye-open"&gt;&lt;/i&gt; Publikus&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My question is how can I make the li with the <code>data-toggle="button"</code> work as a button would with a <code>data-toggle="button"</code> so how can I ask bootstrap to remove and add the active class to that li when clicked?</p>
  
  <p>Also the question is <strong>not</strong> how to do this in js as It would be much nicer to accomplish this purely using the bootstrap api.</p>