Develop Reference

Removing an Onclick Event From a Menu Link

I am using a AJAX search plugin for Wordpress that displays in my mobile menu by targeting a specific menu ID (menu-item-6101). Everything works great, but when I click on it the menu is dismissed (which prevents you from doing any searches, the expected behaviour is for the menu to stay visible while typing).
I have spent a number of hours researching, and it seems that there is an onclick event attached to the <a> of that menu item that is likely causing the menu to be dismissed (note that none of the other parent -> child toggles cause this, only this menu item that the search plugin is using to display a search box).
I have tried every single variation of event.preventDefault();, event.stopImmediatePropagation(); & event.stopPropagation();, as well as trying to remove the listener, send it to null, etc. but unfortunately I am having issues with either the targeting (e.g. fetching the ID, and then targeting the <a>, or it is being overridden due to the javascript load order.
I have also tried to make an onclick event for that menu item div that forces the mobile menu to stay visible (the menu gets style="display:none;" added to when when focus is changed), so I thought perhaps that would be a different approach:
jQuery('div.proinput').click(function(){
var element = document.getElementById('#mobile_menu');
element.style.removeProperty("display");
jQuery('.et_mobile_menu').css({
display: inline-block !important;
});
});
I would really appreciate it if someone could help me.
Thanks!

I think the menu toggle is actually being fired by the div#ajaxsearchpro3_2 inside de anchor. Try with this (assuming the div will allways have the same ID):
FIXED
document.getElementById('ajaxsearchpro3_2')
.addEventListener('click', function(e) {
e.stopPropagation();
});

The final solution is:
jQuery(".et_mobile_menu .menu-item a").not(".toggle-menu").off("click");
Hope that this helps someone :)

slideToggle only clicked element

I have a menu and when I click a link that has a submenu, I want to toggle it. And I did that, however I have more submenus with the same class and when I click one all of them toggles.
I managed to toggle only the clicked element but in this case I need to toggle the children.
Here is the js code I have:
$('li.has-submenu a.link').click(function() {
$('.submenu').slideToggle(500);
});
And here is a quick fiddle of the situation:
http://jsfiddle.net/TV5Kk/
Thanks!

jsFiddle DEMO
$(this).next('.submenu').slideToggle(500);
Since you have multiple elements with class submenu use $(this) to get the relative element. In your mark up, the next element to the link happens to be one you wanted to toggle.
UPDATE:
Since OP wants to automatically slide up all others.
DEMO here
$('li.has-submenu a.link').click(function() {
$('.submenu').slideUp(500);
$(this).next('.submenu').slideToggle(500);
});

CSS dropdown menu not closing after click

I'm using the following tutorial: http://www.script-tutorials.com/css3-metal-menu-with-icons/
The problem is that when I click any element on the submenu, the submenu won't close. My app is using a jQuery UI tab to dynamically add a tab with the content as one partial view (mvc4) so that the app page isn't reloaded. I would like to hide the submenu when an item is clicked, how can i do that?

The submenus are all located in a div with class named subs. You could hide that with JQuery.
$('html').click(function() {
$(".subs").hide();
});
All clicks, anywhere should now hide the submenus or any other element with the class subs

Since you're using jQuery, I would do something like traversing the parents if you know the exact depths, using a click event handler (where e is the event):
$(e.target).parent().parent().hide(), etc
If it could be dynamic, you can do it slightly less efficiently, but in one go:
$(e.target).parents('.thedropdownmenuclass').hide()

Bootstrap: accordion strips ui-droppable class on expand

New to Bootstrap and having some issues with accordion. Hoping someone would help me resolve it.
Basically I have an empty accordion and a drop down menu. Every time a selection made in the drop down menu, it is added to the accordion, with full .accordion-group mark up, but with empty .accordion-body div. After that this accordion-group set as droppable and .ui-droppable class is automatically added.
After that I am able to drag and drop a bunch of other divs into the .accordion-group and those divs are appended to .accordion-body of this particular group. This part works fine, however, as soon as i click to expand any given .accordion-group, .ui-droppable class gets stripped from ALL of them.
How do I stop it from removing .ui-droppable class??
Steps to reproduce:
Use html markup from Bootstrap page:
(For some reason I am unable to format HTML as code here by indenting it with 4 spaces,so im just pasting the link to it)
http://twitter.github.com/bootstrap/javascript.html#collapse
Add JS, which makes groups droppable
$('#accordion2').find('.accordion-group').each(function() {
$(this).droppable();
});
Inspect elements to make sure .ui-droppable class is set
Click to expand a group. Any group.
Inspect elements. .ui-droppable has been stipped from ALL of them

Resolved this, but I think it is a very stupid way to achieve the result, so I am not happy with how Bootstrap handles toggles. I really don't think there is a need to loop though every .accordion-group to re-apply droppable attributes every single time someone opens OR closes a section.
Going to re-do it with just a button and a div for each section.
Here is the solution:
$('#host-groups').on('shown', function() {
$('#host-groups').find('.accordion-group').each(function() {
$(this).attr('id').droppable();
});
});
$('#host-groups').on('hidden', function() {
$('#host-groups').find('.accordion-group').each(function() {
$(this).attr('id').droppable();
});
});
/facepalm

Creating mobile jQuery Toggle menu

I'm trying to make an jQuery toggle menu for a mobile website.
Since it is a wordpress site I would like to make this as dynamic as possible. I want to create a custom WordPress menu.
Now the tricky part comes.
I want it to check if the menu item has children (or child ul) and then toggle between:
<div class="plus">+</div> and <div class="min">-</div>.
When a item has no childeren nothing should happen at all.
So far I've managed to do this, please see my experiment at http://jsfiddle.net/jfvandekamp/9Dvrr/2/

You can use the jQuery function $.contains() to Check to see if a DOM element is within another DOM element.
http://api.jquery.com/jQuery.contains/
So in your example, you'd check to see if the menu item that was clicked contains another UL element
$jQuery.contains($(this), '<ul>');

I would use $.has() to filter out the collapsible items.
I've updated your jsFiddle: http://jsfiddle.net/9Dvrr/5/