Onclick应该关闭其他打开的元素

Question

I do have 2 elements in my page which i want to show them when user clicks on 2 different buttons.

Here is my code

$('.social-toggle').on('click', function() {
  $(this).next().toggleClass('open-menu');
});

$('.social-toggle1').on('click', function() {
  $(this).next().toggleClass('open-menu');
});

When user clicks on the first button, the first element will be show up, but i want either user clicks on the second button or one of the links in the opened-menu the first opened menu be closed.

JSFIDDLE

Answer 1

You do not need to write two different event here. Use comma seprated multiple selector for targetting both button:

$('.social-toggle,.social-toggle1').on('click', function() {
  $('.social-networks').not($(this).next()).removeClass('open-menu');
  $(this).next().toggleClass('open-menu');
});

Working Demo

Answer 2

Here is the code what you want. You didnt removed the class which was applied previously.

$('.social-toggle').on('click', function() {
    $('.social-toggle1').next().removeClass('open-menu');
  $(this).next().toggleClass('open-menu');

});

$('.social-toggle1').on('click', function() {
    $('.social-toggle').next().removeClass('open-menu');
  $(this).next().toggleClass('open-menu');
});