We Keep Coding

Call javascript after choosing from Bootstrap Dropdown

All Bootstrap Dropdown menu examples show the items having an link like:
<li>a</li>
How can I make a Bootstrap dropdown menu where choosing an item triggers a javascript method?
(If it makes a difference, the menu items will also be added to the menu using javascript/jquery initially)
Is this just a matter of adding a click function to each <li>? Or does Bootstrap provide special handling for its dropdown items?
If I add a click function, do I still need each item to also have the <a href="#"> tag around the text?

Looks like the answer is:
Bootstrap does not supply any special handling for clicks on its
dropdown menu items; and
I could add a click function to each item in the list; or
I could use event delegation to add the click function to the list
itself, and it will be triggered on each child's click
Thanks to #Pevara and #spaceman for getting me rolling.

How to prevent accordion animation in Foundation 6

I'm trying to create a form that uses accordions for organization using Foundation 6. I want to add inputs and buttons to the accordion title. Normally when the accordion title is clicked it, it toggles its content by sliding. I want to disable this effect, so that if I click the button in the title the content won't toggle, since it's really annoying if it expands and contracts every time I click the button.
I have something like:
$body.on('click', '.button_on_title', function (event) {
// do stuff
});
I've tried event.preventDefault() and event.stopPropagation(), and they have no effect. It seems like Foundation 6 is somehow overriding the event stack?
Edit:
To clarify, I want to prevent the accordion from opening and closing when clicked, not just remove the sliding animation.

You just need to set the slide speed to 0 to disable the animation. One easy way to set the slide speed is through the data-slide-speed data attribute.
Here is the example from the docs with this attribute added:
<ul class="accordion" data-accordion data-slide-speed="0">
<li class="accordion-item is-active">
<a class="accordion-title">Accordion 1</a>
<div class="accordion-content" data-tab-content>
I would start in the open state, due to using the `is-active` state class.
</div>
</li>
<!-- ... -->
</ul>

Foundation5 Stop Dropdown from Being clickable

When I hover over the dropdowns on:
Website with Issue
They do not open unless they are clicked. The website is built using Foundation5 (FoundationPress) and I am not able to figure out how to disable this behaviour in favour of having the dropdown appear on hover.
Thanks

Try using the hoverable dropdown options on the menu accessed through the data-options attribute. Similar convention with some of your content below as an example:
Course Locations
<ul id="hover1" class="f-dropdown" data-dropdown-content>
<li>Brampton</li>
<li>Burlington</li>
<li>Hampton</li>
<li>etc.</li>
</ul>
You can set the hover_timout in milliseconds to delay closing after removing your mouse from the area.
Docs for this here: http://foundation.zurb.com/docs/components/dropdown.html

Dropdown menu being hidden with in table after table is toggle hidden/shown using jquery toggle()

I have a very wierd issue, here is the issue.
I have a table, and in the row of that table i have a dropdown list.
This table can be hidden, toggled show/hide by clicking on a button.
When the table is hidden and then unhidden the dropdown menu now is only rendered within the
dimensions of the table. So if the dropdown menu is longer than the table it does not rendered that
portion of the dropdown.
I am using the .toggle method from jQuery to hide/show the table and its something like this:
$(".hideshow").click(function () {
var tableToToggle = $(this).closest('table').next();
$(tableToToggle).toggle("slow", function () {
// Animation complete.
});
});
I have tried changing the z-index but this doesn't seem to have any effect, it just seems some how the drop down is stuck within the table now and will not render outside of it.
any help on solving this is welcome.
NOTE: working in ASP.net C#. using jquery.
Thank you.
Edit: more info:
Was hoping it was some flag I missed that someone could just say. Seems thats not the case :(
Also note that before I make the toggle on the table the drop down menu is working perfectly fine. renders as it should.
The drop down is inside of a div tag as so:
<Table>
<tr>
<td>
<div>
<button> //Button toggles the list
</button>
<ul>
<li/> //Dropdown
<li/>
</ul>
</div>
</td>
</tr>
</table>
The tables are made at compile time, goes through a loop and creates all the tables and elements on the page.
there are some CSS class but nothing that stands out, just padding / text size alignment that sort of thing.
SOLUTION:
Turns out it was jQuery.
My jQuery Files were out of data, I had 1.8, updated to 1.11 and now everything works perfectly. So if you every come across something like what I describe up top, try update your jQuery files :)

Bootstrap, CSS, JS - Bootstrap file menubar hover after click

I want to make an application making use of twitter's bootstrap framework. I have a navbar that functions like a File Menu bar with File/Edit/Help/etc.
I like the fact that you need to click to make the dropdown appear, however how can I make it where it will dropdown the Edit menu for instance when moving from the File menu (after it is clicked and dropped down).
An example of this is going to google docs, clicking one menu and then moving to another menu item it will dropdown the new hovered menu

My solution: for your <ul> element make two classes.
One for example doc-menu other normal-menu.
On menu item click: your <li> should get class="active" and <ul class="doc-menu".
Then show up inner <ul><li>....</ul> inside <li class="active"> and keep it up even if not hovered. On other doc-menu item hover you change the active class to other <li> element. This can be done by listening to mouseover using javascript. When clicked on background or inner <ul><li>....</ul> change <ul class="doc-menu"> to <ul class="normal-menu>