在onclick addClass

Question

我真的是jQuery新手。我已经从一些教程的wordpress菜单中获取了一些代码，但是我想为其添加一些自定义。所以我要寻找的是单击具有“ has-sub”类的li，并添加“ open”类，如果它不具有“ has-sub”类，我希望其他li元素事件-sub”以添加“ disabled”类。我的目的是使用CSS样式将其他菜单项显示为灰色，以便将重点放在单击的内容上。这可能吗。这是我的jQuery代码。

$('#cssmenu li.has-sub>a').on('click', function(){
  $(this).removeAttr('href');
  var element = $(this).parent('li');
  if (element.hasClass('open')) {
    element.removeClass('open');
    element.find('li').removeClass('open');
    element.find('ul').hide();

  }
  else {
    element.addClass('open');
    element.children('ul').show();
    element.siblings('li').children('ul').hide();
    element.siblings('li').removeClass('open');
    element.siblings('li').find('li').removeClass('open');
    element.siblings('li').find('ul').hide();
  }
});

Answer 1

我认为您所追求的只是添加和删除CSS类的问题。

点击后，在所有元素上添加greyed并删除highlighted。.
点击元素的反函数。

如果您只是改进了两个类的样式切换（感觉像是在本演示中毫不费力），那么您就有一个入门者。

类似：

$('#cssmenu li.has-sub a').on('click', function(e){
  e.preventDefault();
  $(".has-sub").removeClass("highlighted").addClass("greyed");
  $(this).parents(".has-sub").addClass("highlighted").removeClass("greyed");
});

a{
  text-decoration:none;
  color:black;
}
.highlighted{
  background-color:cyan;
}
.highlighted a{
  color:red;
}
.greyed{
  background-color:#bbb;
}
.greyed a{
  color:#444;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="cssmenu">
  <li class="has-sub">
    <ul>
      <li>
        <a href="#">Anchor</a>
      </li>
      <li>
        <a href="#">Anchor</a>
      </li>
      <li>
        <a href="#">Anchor</a>
      </li>
      <li>
        <a href="#">Anchor</a>
      </li>
    </ul>
  </li>
  <li class="has-sub">
    <ul>
      <li>
        <a href="#">Anchor</a>
      </li>
      <li>
        <a href="#">Anchor</a>
      </li>
      <li>
        <a href="#">Anchor</a>
      </li>
      <li>
        <a href="#">Anchor</a>
      </li>
    </ul>
  </li>
  <li class="has-sub">
    <ul>
      <li>
        <a href="#">Anchor</a>
      </li>
      <li>
        <a href="#">Anchor</a>
      </li>
      <li>
        <a href="#">Anchor</a>
      </li>
      <li>
        <a href="#">Anchor</a>
      </li>
    </ul>
  </li>
</ul>