切換類獨立的元素，並刪除類

Question

我有這樣的代碼：

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

我需要能夠點擊「再加上和下面的」 .submenu」切換的一類。

爲此，我有：

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

工作正常。我需要它做的不僅是關閉和關閉課程，而且如果另一個'.plus'鏈接被點擊，也可以刪除課程。

所以應該：

1. 切換類和關閉，如果你不斷地點擊相同的「再加上
2. 從任何其他」。再加上鍊接中刪除類，並添加類所點擊'加號'
3. 也非常的 '+' 文本應更改爲 - 點擊

感謝

Answer 1

T當' o做你需要的東西，你可以在所有其他.submenu元素上打電話removeClass()。要將+更改爲-，可以使用text()方法根據當前設置切換值。您還可以刪除空的onclick屬性。試試這個：

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