We Keep Coding

Toggle class doesn't work with push menu

Can you help me and tell me why this code doesn't work? On click '.push-button' it should open the '#push-menu' and that works but the other part of the doesn't work instead of showing the elements on the first click and then hiding the elements on the second click, it doesn't even show them when I open the menu it is empty, just white!
$(document).ready(function () {
$(".push-button").click(function () {
$("#push-menu").toggle(
function (){
$('.link-item-1').addClass('active-1');
$('.link-item-2').addClass('active-2');
$('.link-item-3').addClass('active-3');
$('.link-item-4').addClass('active-4');
$('.link-item-5').addClass('active-5');
}, function (){
$('.link-item-1').removeClass('active-1');
$('.link-item-2').removeClass('active-2');
$('.link-item-3').removeClass('active-3');
$('.link-item-4').removeClass('active-4');
$('.link-item-5').removeClass('active-5');
}
);
});
});

The problem is because the toggle() method no longer works in the manner you expect. It was changed several versions ago.
However, you can fix both the issue and massively simplify your code by using toggleClass() instead:
$(".push-button").click(function () {
$('.link-item-1').toggleClass('active-1');
$('.link-item-2').toggleClass('active-2');
$('.link-item-3').toggleClass('active-3');
$('.link-item-4').toggleClass('active-4');
$('.link-item-5').toggleClass('active-5');
});
I would also suggest you revisit the logic you're using with regard to the classes. They are supposed to group common elements, yet you have given each element its own unique class which is the complete opposite pattern.
To make that work you could then use the same class on all elements, eg. link-item, then identify them by index in either JS or CSS, whenever required.
$(".push-button").click(function () {
$('.link-item').toggleClass('active');
});

How to make a dropdown menu with span tag and glyphicon instead of button on bootstrap?

I was looking for that a long time without success.
I found a link that explain how to do it, but it has no example and I don't know how to implement on my website.
Anyone can help me? Anyone knows how to do it?

Here's the code that you're looking for, that with jquery:
$('#willtoggle').on('click', function (event) {
$("#toggled").toggle();
});
the #willtoggle is a span with the class of caret defined on bootstrap, so on click, it'll toggle the dropdown-menu(that have the id="toggled").
And this code for hiding it when clicking outside:
$(document).on('click', function(event) {
if ($(event.target).closest('.dropdown').length === 0) {
$("#toggled").hide();
}
});
Here's the JSFiddle that I made.

Jquery help: .click() to each individual element

I've written up this code to add a class (.box-open which adds display:block) to my box (.sharebox) when a button (#share-but) is clicked but the problem is I'm having trouble making this only apply to one .share div at a time because everytime I click a button, all the .shareboxs get the class .box-open applied to it.
function shareBox() {
$('.share').each(function( index ) {
$(this).on('click', '#share-but', function() {
if ($('.sharebox').hasClass('box-open')) {
$('.sharebox').removeClass('box-open');
}
else {
$('.sharebox').addClass('box-open');
}
});
});
}
shareBox();
Here is an image of the problem (I'm building a Tumblr Theme). Hopefully it's a lot easier to understand. http://24.media.tumblr.com/c5c4252607bf4a9905c7c9de5b592c60/tumblr_ml4t2fSuQo1rqce8co1_500.png <---- This happened when I clicked one of the buttons, but I only want one .sharebox to have the class .box-open added to it when I click the #share-but inside the same .share div.
I hope all of this made sense. I'm still very noob at Javascript/Jquery as I only started learning like 2 weeks ago so any help is much appreciated!

You have to use $(this) instead of $('.sharebox') to address source of event
$('.sharebox').addClass('box-open');
Would be
$(this).addClass('box-open');
The id of element is supposed to be unique in document so you can bind click directly to '#share-but', if it is not unique you can bind it like this.
$('.share').on('click', '#share-but', function() {
if ($('.sharebox').hasClass('box-open')) {
$('.sharebox').removeClass('box-open');
}
else {
$('.sharebox').addClass('box-open');
}
});
You can use toggleClass to make it simple, I assume you have single item with id #share-but,
$('#share-but').click(function(){
$(this).toggleClass("box-open");
});

This would be a simpler version, you can toggle the classname :)
$('.share').on("click", "#share-but", function() {
$(this).find(".sharebox").toggleClass('box-open');
});

Function stops after click()

I'm trying to simulate two click to open a menu. The first one opens the menu and the second the submenu but after the first click() the function stops.
This is my JS code:
function open_menu(id_menu, id_sub_menu) {
$('.sous-domaines a#lien-domaine-'+id_menu).click();
$('a#lien-menu-'+id_sub_menu).click();
}
I call my function in HTML with this code:
<span onClick="open_menu('0', '116')">Open sub-menu</span>

You're doing it too fast maybe.
Wrap the second one in a window.setTimeout()

can you do something like this ? set a bool after first click
var IsClick = false;
function open_menu(id_menu, id_sub_menu) {
$('.sous-domaines a#lien-domaine-'+id_menu).click();
if (IsClick){ fnSecondClick();}
}
function fnSecondClick() {
//open submenu
}
or something like this - on click check if menu is visible:
function open_menu(id_menu, id_sub_menu) {
$('.sous-domaines a#lien-domaine-'+id_menu).click();
if ($(element).is(":visible")){ fnSecondClick();}
}

Well you can give this a try, it is pretty much waht you had, other than the fact i don't have menu open somewhere
http://jsfiddle.net/tRg3e/2/
I think the .click() only works if you have a handler attached, it does not trigger the native click on the element.. I tried it without handler and the link does not go

You should stray away from 'onClick' declared in elements like that, it's bad practice if I do recall. Nonetheless, it still works.
If you could provide some HTML code it would help clarify the idea but you could set a trigger event for example:
http://jsfiddle.net/wrN2u/3/
EDIT: With a toggle - http://jsfiddle.net/wrN2u/18/

What's the best way to do this: Show/hide menu on mouseenter/mouseleave, with a button to toggle visibility?

http://jsfiddle.net/nicktheandroid/ppNaX/
This is somewhat theoretical. The menu shows/hides on mouseenter/mouseleave, with a toggle button to remove this functionality should a user find it annoying. In my example i have the element that triggers the toggle just showing it and not actually toggling it, but what I really want to know is, what's the best way to do something like this?
Is there a better way to do it? Custom jQuery events? Using .data()? Could it be more advanced(silly?)? More simple? Benefits, pitfalls?

Conceptually all correct. Details can be improved:
var menuWrapper = $('#menuWrapper'),
menu = $('#menu');
var toggleFade = function (toggle) {
menu.stop(true, true);
toggle ? menu.fadeIn() : menu.fadeOut();
};
menuWrapper.bind('mouseenter', function () {
toggleFade(true);
}).bind('mouseleave', function () {
toggleFade(false);
});
$('#showMenu').click(function () {
toggleFade(true);
menuWrapper.unbind('mouseenter').unbind('mouseleave');
});
Most of all — you need to stop the animation before running another one, because the user can do a mouseover while the menu is animated, leading to a mess.