トグルクラスとクラス

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> 

私はクラスを切り替えるには、「.plus'と以下の」.submenu」をクリックできるようにする必要があります。

そして、そのために私が持っている：正常に動作します

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

を。私がする必要があるのは、クラスをオン/オフするだけでなく、別の '.plus'リンクがクリックされるとクラスを削除することです。

だからはず：

1. 切り替えクラスオフとオンあなたが同じ「.plus'
2. をクリックし続ければ、他の」.plus'リンクからクラスを削除して、クリックにクラスを追加'プラス'
また
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>