jquery - jquery 中每次点击函数后运行一个条件

Question

我有一个用于多级下拉列表的jquery代码。一切都很完美。

我只想更改事件列表文本的颜色，并在不活动时恢复正常。

每次我在函数中放入 if 语句时，它都会与 click 函数一起运行，而不是在函数执行后运行。

因此我的 if 语句 没有给出所需的输出。

有没有办法设置一个条件并在每次点击发生后执行它？

$('.navbar-nav>li').on("click", function(event) {
    //debugger;

    if (windowWidth < 992) {
        $(this).find('ul.ul-reset').slideToggle();
        event.stopPropagation();
        console.log('PARENT', event);
    }
});

Answer 1

我将使用 CSS 类将选定的 css 添加到单击的项目。

$('.navbar-nav li').on("click", function(event) {
  
  // remove previous active_li class
  $(".navbar-nav").find('.active_li').removeClass("active_li");
  
  // add active class to the clicked li
  $(this).addClass("active_li");
  
});

.active_li {
  color: red;
}

li:hover {
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class='navbar-nav ul-reset'>
  <li>Title</li>
  <li>Name</li>
      <ul>
      <li>Title2</li>
      <li>Test2</li>
    </ul>
</ul>