clarify use of dropdowns, href, and data-target for js docs; add tests to css tests page for it's display and execution in html

4 files changed, 71 insertions, 0 deletions

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 8711ab2e7..7f95f01c6 100644
--- a/docs/assets/bootstrap.zip
+++ b/docs/assets/bootstrap.zip
diff --git a/docs/javascript.html b/docs/javascript.html
index 4f777e031..2a0f3d861 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -493,6 +493,20 @@ $('#myModal').on('hidden', function () {
   </li>
   ...
 &lt;/ul&gt;</pre>
+          <p>To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.</p>
+<pre class="prettyprint linenums">
+&lt;ul class="nav nav-pills"&gt;
+  &lt;li class="dropdown"&gt;
+    &lt;a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html"&gt;
+      Dropdown
+      &lt;b class="caret"&gt;&lt;/b&gt;
+    &lt;/a&gt;
+    &lt;ul class="dropdown-menu"&gt;
+      ...
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
           <h3>Methods</h3>
           <h4>$().dropdown()</h4>
           <p>A programatic api for activating menus for a given navbar or tabbed navigation.</p>
diff --git a/docs/templates/pages/javascript.mustache b/docs/templates/pages/javascript.mustache
index d61a364f0..bb25f0957 100644
--- a/docs/templates/pages/javascript.mustache
+++ b/docs/templates/pages/javascript.mustache
@@ -416,6 +416,20 @@ $('#myModal').on('hidden', function () {
   &lt;/li&gt;
   ...
 &lt;/ul&gt;</pre>
+          <p>{{_i}}To keep URLs intact, use the <code>data-target</code> attribute instead of <code>href="#"</code>.{{/i}}</p>
+<pre class="prettyprint linenums">
+&lt;ul class="nav nav-pills"&gt;
+  &lt;li class="dropdown"&gt;
+    &lt;a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html"&gt;
+      {{_i}}Dropdown{{/i}}
+      &lt;b class="caret"&gt;&lt;/b&gt;
+    &lt;/a&gt;
+    &lt;ul class="dropdown-menu"&gt;
+      ...
+    &lt;/ul&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;
+</pre>
           <h3>{{_i}}Methods{{/i}}</h3>
           <h4>$().dropdown()</h4>
           <p>{{_i}}A programatic api for activating menus for a given navbar or tabbed navigation.{{/i}}</p>
diff --git a/less/tests/css-tests.html b/less/tests/css-tests.html
index 42cdab045..f6f4b2351 100644
--- a/less/tests/css-tests.html
+++ b/less/tests/css-tests.html
@@ -330,8 +330,51 @@
   </div><!--/row-->
 </div>
 
+<br>
+
+<!-- Dropdowns
+================================================== -->
+
+<div class="page-header">
+  <h1>Dropdowns</h1>
+</div>
 
 
+<h4>Dropdown link with hash URL</h4>
+<ul class="nav nav-pills">
+  <li class="active"><a href="#">Link</a></li>
+  <li><a href="#">Example link</a></li>
+  <li class="dropdown">
+    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
+      Dropdown <span class="caret"></span>
+    </a>
+    <ul class="dropdown-menu">
+      <li><a href="#">Action</a></li>
+      <li><a href="#">Another action</a></li>
+      <li><a href="#">Something else here</a></li>
+      <li class="divider"></li>
+      <li><a href="#">Separated link</a></li>
+    </ul>
+  </li>
+</ul>
+
+<h4>Dropdown link with custom URL and data-target</h4>
+<ul class="nav nav-pills">
+  <li class="active"><a href="#">Link</a></li>
+  <li><a href="#">Example link</a></li>
+  <li class="dropdown">
+    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="path/to/page.html">
+      Dropdown <span class="caret"></span>
+    </a>
+    <ul class="dropdown-menu">
+      <li><a href="#">Action</a></li>
+      <li><a href="#">Another action</a></li>
+      <li><a href="#">Something else here</a></li>
+      <li class="divider"></li>
+      <li><a href="#">Separated link</a></li>
+    </ul>
+  </li>
+</ul>