diff --git a/docs/javascript/dropdowns.md b/docs/javascript/dropdowns.md index 8a8c07c45e..a4fe9e5e09 100644 --- a/docs/javascript/dropdowns.md +++ b/docs/javascript/dropdowns.md @@ -3,122 +3,124 @@ layout: page title: Dropdowns --- -
-

Dropdowns dropdown.js

+Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills. - -

Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.

+### Within navbars -

Within a navbar

-
- -
- -

Within pills

-
-
+
+ - -
+
+ + + +### Within pills - -

Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the .open class on the parent list item.

-

On mobile devices, opening a dropdown adds a .dropdown-backdrop as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.

-

Note: The data-toggle="dropdown" attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it.

+
+ +
+ +## Usage + +Via data attributes or JavaScript, the dropdown plugin toggles hidden content (dropdown menus) by toggling the `.open` class on the parent list item. + +On mobile devices, opening a dropdown adds a `.dropdown-backdrop` as a tap area for closing dropdown menus when tapping outside the menu, a requirement for proper iOS support. **This means that switching from an open dropdown menu to a different dropdown menu requires an extra tap on mobile.** + +Note: The `data-toggle="dropdown"` attribute is relied on for closing dropdown menus at an application level, so it's a good idea to always use it. + +### Via data attributes + +Add `data-toggle="dropdown"` to a link or button to toggle a dropdown. -

Via data attributes

-

Add data-toggle="dropdown" to a link or button to toggle a dropdown.

{% highlight html %}
{% endhighlight %} -

To keep URLs intact with link buttons, use the data-target attribute instead of href="#".

+ +To keep URLs intact with link buttons, use the `data-target` attribute instead of `href="#"`. + {% highlight html %}
@@ -144,56 +148,64 @@ title: Dropdowns
{% endhighlight %} -

Via JavaScript

-

Call the dropdowns via JavaScript:

+### Via JavaScript + +Call the dropdowns via JavaScript: + {% highlight js %} $('.dropdown-toggle').dropdown() {% endhighlight %} -
-

data-toggle="dropdown" still required

-

Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown's trigger element.

-
-

Options

-

None

+
+

data-toggle="dropdown" still required

+

Regardless of whether you call your dropdown via JavaScript or instead use the data-api, data-toggle="dropdown" is always required to be present on the dropdown's trigger element.

+
-

Methods

-

$().dropdown('toggle')

-

Toggles the dropdown menu of a given navbar or tabbed navigation.

+### Options + +*None.* + +### Methods + +#### $().dropdown('toggle') + +Toggles the dropdown menu of a given navbar or tabbed navigation. + +### Events + +All dropdown events are fired at the `.dropdown-menu`'s parent element. + +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
Event TypeDescription
show.bs.dropdownThis event fires immediately when the show instance method is called. The toggling anchor element is available as the relatedTarget property of the event.
shown.bs.dropdownThis event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the relatedTarget property of the event.
hide.bs.dropdownThis event is fired immediately when the hide instance method has been called. The toggling anchor element is available as the relatedTarget property of the event.
hidden.bs.dropdownThis event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the relatedTarget property of the event.
+
-

Events

-

All dropdown events are fired at the .dropdown-menu's parent element.

-
- - - - - - - - - - - - - - - - - - - - - - - - - -
Event TypeDescription
show.bs.dropdownThis event fires immediately when the show instance method is called. The toggling anchor element is available as the relatedTarget property of the event.
shown.bs.dropdownThis event is fired when the dropdown has been made visible to the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the relatedTarget property of the event.
hide.bs.dropdownThis event is fired immediately when the hide instance method has been called. The toggling anchor element is available as the relatedTarget property of the event.
hidden.bs.dropdownThis event is fired when the dropdown has finished being hidden from the user (will wait for CSS transitions, to complete). The toggling anchor element is available as the relatedTarget property of the event.
-
{% highlight js %} $('#myDropdown').on('show.bs.dropdown', function () { // do something… }) {% endhighlight %} -