jquery Geschwister wie Klasse zu entfernen?

Question

Ich habe folgende 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> 

Die folgende 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> 

Alles funktioniert gut, außer, wenn Sie durch die Menüs navigieren wird es nicht die ausgewählte Klasse entfernen und sobald Sie alle Menüs klicken Sie alle haben die Klasse ausgewählt.

Ich habe keine großartige Erfahrung in Javascript oder Jquery, irgendeine Chance, einige von euch könnten mir bitte etwas Hilfe geben?

Hinweis: Der HTML-Code wurde zu Demonstrationszwecken reduziert.

Fiddle

Answer 1

können Sie

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

wenn Sie jQuery 1.7+ Sie sollten wahrscheinlich

Wechsel:

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

Um

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

Answer 3

Diese Codezeile könnte Ihr Problem werden:

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

Sie wollen wahrscheinlich die Klassen zuerst löschen, fügen Sie es dann auf das ausgewählte Element:

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

Answer 4

Verwenden

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

Verwenden versuchen a not anstatt siblings.

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

Sie können auch closest

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