切换单独元素的 class 并删除 class

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”来切换 class。

为此我有：

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

效果很好。我需要它做的不仅是关闭和打开 class，而且如果单击另一个“.plus”link，还要删除 class。

所以它应该：

如果您一直点击相同的“.plus”
从任何其他“.plus”中删除 class link 并将 class 添加到单击的 'plus'
此外，理想情况下，单击时“+”文本应更改为“-”

谢谢

Answer 1

要执行您需要的操作，您只需对所有其他 .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>

切换单独元素的 class 并删除 class

Toggle class of separate element and remove class

jquery

toggle