jquery siblings jak usunąć klasę?

Question

Mam następujący 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> 

Poniższy 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> 

Wszystko działa poprawnie z wyjątkiem, gdy poruszać się po menu nie usunie wybraną klasę i po kliknięciu wszystkie menu wszystkie mają wybraną klasę.

Nie mam dużego doświadczenia z javascript lub jquery, czy jest szansa, że ​​niektórzy z was mogą mi pomóc?

Uwaga: kod HTML został zmniejszony do celów demonstracyjnych.

Fiddle

Answer 1

można spróbować

$('.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

jeśli masz jQuery 1.7+ zalecana prawdopodobnie

Zmiana:

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

Aby

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

Answer 3

Ta linia kodu może być problem:

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

Prawdopodobnie chcesz usunąć klasy pierwszej, a następnie dodać go do wybranego elementu:

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

Answer 4

Używaj

$('.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

Użyj a not zamiast siblings.

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

Można również użyć closest

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