jquery - onclick addClass 后禁用

Question

我对 jQuery 真的很陌生。我从一些教程中为我的 wordpress 菜单获取了一些代码，但我想为其添加一些自定义。所以我正在寻找的是当单击具有“has-sub”类的 li 并添加“open”类时，如果它没有类“has”，我希望其他 li 元素事件-sub”添加一类“禁用”。我的目的是用 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();
  }
});

标签： jqueryonclicktoggle

Answer 1

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

单击时，在所有元素上添加greyed和删除 a 。 单击元素的反面。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>