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'链接也删除课程。

所以它应该：

如果您一直点击相同的'.plus'
从任何其他“.plus”链接中删除该类，并将类添加到单击的“加号”
理想情况下，点击时“+”文字应更改为“ - ”

由于

Answer 1

要执行您需要的操作，您只需在所有其他removeClass()元素上调用.submenu即可。要将+更改为-，您可以使用text()方法根据其当前设置切换值。您还可以删除空的onclick属性。试试这个：

＆＃13;

$('.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('+');
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: