jquery siblings как удалить класс?

Question

У меня есть следующие JQuery:

<script type="text/javascript"> 
$('.showFood').on('click', function() { 
    $(this).addClass('selected').siblings().removeClass('selected'); 
    $('.targetFood').hide(); 
    $('#food' + $(this).data('target')).show(function() { 
     $('#food' + $(this).data('target')).toggle("slide"); 
    }); 
}); 
$('.showFood').first().click(); 
</script> 

Следующая HTML:

<ul class="menus-nav"> 
<li><a href="#menu1" class="showFood" data-target="1">Menu 1</a></li> 
<li><a href="#menu2" class="showFood" data-target="2">Menu 2</a></li> 
<li><a href="#menu3" class="showFood" data-target="3">Menu 3</a></li> 
</ul> 
<div id="food1" class="targetFood"> 
<p>Items from menu 1</p> 
</div> 

<div id="food2" class="targetFood"> 
<p>Items from menu 2</p> 
</div> 

<div id="food3" class="targetFood"> 
<p>Items from menu 3</p> 
</div> 

Все отлично работает, за исключением, когда вы перемещаетесь по меню не будет удалять выбранный класс и после нажатия кнопки все меню все они имеют выбранный класс.

У меня нет большого опыта в javascript или jquery, любой шанс, который вы, ребята, могли бы мне помочь?

Примечание: html был уменьшен для демонстрационной цели.

Fiddle

Answer 1

вы можете попробовать

$('.showFood').on('click', function() { 
$('.showFood').removeClass('selected');// here remove class selected from all showfood 
    $(this).addClass('selected');// here apply selected class on clickable showfood 
    $('.targetFood').hide(); 
    $('#food' + $(this).data('target')).show(function() { 
     $('#food' + $(this).data('target')).toggle("slide"); 
    }); 
}); 

Answer 2

если у вас есть JQuery 1.7+ вы должны, вероятно,

Изменение:

$('.showFood').on('click', function() { 
    //YOUR CODES HERE 
}) 

Для

$(document).on('click', '.showFood', function() { 
    //YOUR CODES HERE 
}) 

Answer 3

Эта строка кода может быть ваша проблема:

$(this).addClass('selected').siblings().removeClass('selected'); 

Вы, вероятно, хотите, чтобы сначала удалить классы, а затем добавить его к выбранному элементу:

$('.selected').removeClass('selected'); // remove all current selections 
$(this).addClass('selected')   // select this element 

Answer 4

Используйте

$('.showFood').on('click', function() { 
$('.showFood').removeClass('selected'); //remove selected class from all elements with class showFood 
    $(this).addClass('selected') 
    $('.targetFood').hide(); 
    $('#food' + $(this).data('target')).show(function() { 
     $('#food' + $(this).data('target')).toggle("slide"); 
    }); 
}); 

Answer 5

Использование a not, а не siblings.

$(this).addClass('selected'); 
$(".showFood").not(this).removeClass('selected'); 

Вы также можете использовать closest

$(this) 
    .addClass('selected').closest('ul') 
    .find('a').not(this).removeClass('selected');