Toggle Klasse separates Element und entfernen Klasse

Question

Ich habe diesen Code:

<ul>   
    <li> 
    <a href="#" onclick="">Menu item One</a> 
    <a class="plus" href="#">+</a> 
    <ul class="submenu"> 
     <li><a href="#" onclick=""><span>Contact</span></a></li> 
     <li><a href="#" onclick=""><span>Location</span></a></li> 
    </ul> 
    </li> 
    <li> 
    <a href="#" onclick="">Menu item Two</a> 
    <a class="plus" href="#">+</a> 
    <ul class="submenu"> 
     <li><a href="#" onclick=""><span>Contact</span></a></li> 
     <li><a href="#" onclick=""><span>Location</span></a></li> 
    </ul> 
    </li> 
</ul> 

Ich brauche ‚.plus' in der Lage sein zu klicken und die unter‘ .submenu‘eine Klasse zu wechseln.

Und dafür habe ich:

$('.plus').click(function() { 
    $(this).next().toggleClass("someClass"); 
}); 

der gut arbeitet. Ich muss nicht nur die Klasse ein- und ausschalten, sondern auch die Klasse entfernen, wenn auf eine andere .plus-Verknüpfung geklickt wird.

So sollte es:

1. Toggle die Klasse aus und wenn Sie das gleiche ‚.plus' halten, klicken
2. die Klasse entfernen von jedem anderen‘ .plus' Link und fügen Klasse angeklickten 'Plus'
3. auch ideal die '+' Text sollte sich ändern '-', wenn darauf geklickt

Dank

Answer 1

T o tun, was Sie brauchen, können Sie einfach removeClass() auf allen anderen .submenu Elemente aufrufen. Um die + in eine zu ändern, können Sie die text() Methode verwenden, um den Wert basierend auf seiner aktuellen Einstellung umzuschalten. Sie können auch die leeren onclick Attribute entfernen. Versuchen Sie folgendes:

$('.plus').click(function(e) { 
 
    e.preventDefault(); 
 

 
    var $target = $(this).text(function(i, t) { 
 
    return t == '+' ? '-' : '+'; 
 
    }).next().toggleClass("someClass"); 
 
    
 
    $('.submenu').not($target).removeClass('someClass'); 
 
    $('.plus').not(this).text('+'); 
 
});

li li { display: none; } 
 
li ul.someClass li { display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <a href="#">Menu item One</a> 
 
    <a class="plus" href="#">+</a> 
 
    <ul class="submenu"> 
 
     <li><a href="#"><span>Contact</span></a></li> 
 
     <li><a href="#"><span>Location</span></a></li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a href="#">Menu item Two</a> 
 
    <a class="plus" href="#">+</a> 
 
    <ul class="submenu"> 
 
     <li><a href="#"><span>Contact</span></a></li> 
 
     <li><a href="#"><span>Location</span></a></li> 
 
    </ul> 
 
    </li> 
 
</ul>