Question

我正在使用一些CSS类和jQuery创建自定义选择框。但是我仍然对removeClass（）函数有问题。我知道有解决此问题的替代方法。但是有人可以向我解释为什么它不起作用吗？

#create a vector with all subfolders from "parent folder/" 
dirs <- list.dirs(path = "parent folder/", full.names = TRUE, recursive = TRUE)
#show the subdirectories that contain "company A"  in it's path
dirs[ grepl( "company A", dirs )]

$(".filterselect").on("click",function(){
  $(this).find("ul").addClass("open");
});

$(".filterselect ul li").on("click",function(){
  $(this).parent().find("li").removeClass("active"); // THIS WORKS
  $(this).addClass("active"); // THIS WORKS
  if ($(this).parent().hasClass("open"))
  {
    console.log("test"); // THIS WORKS
  }
  $(this).parent().removeClass("open"); // THIS DOESN'T WORK :(
});

Answer 1

该事件正在冒泡，导致.filterselect点击处理程序再次触发。因此，是删除该类，只是将其添加回去。

如果您停止传播事件，则不会发生，但首先不会获得该类，因为.filterselect根本不会获得该事件。

您可以将功能更改为此，它将按预期工作：

$(".filterselect").on("click", function() {
  $(this).find("ul").addClass("open");
});

$(".filterselect ul li").on("click", function(e) {
  $(this).parent().find("li").removeClass("active");
  $(this).addClass("active");
  if ($(this).parent().hasClass("open")) {
    $(this).parent().removeClass("open");
    console.log("Remove class");
    e.stopPropagation();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section class="filter driedelig mw1">
  <div class="filteritem">
    <div class="filterselect">
      <ul>
        <li>Categorie 1</li>
        <li>Categorie 2</li>
        <li>Categorie 3</li>
      </ul>
      <i class="fas fa-angle-down"></i>
    </div>
  </div>
</section>

正如您所说，还有其他处理方式。其中之一是删除.filterselect单击处理程序并从子级管理ul状态。如果页面上有任何依赖该事件的行为，它将使事件仍然冒泡：

$("ul li").on("click",function(){
  $parent = $(this).parent(); // Cache the selector
  $parent.find("li").removeClass("active");
  $(this).addClass("active");
  if ($parent.hasClass("open")) {
    $parent.removeClass("open");
  } else {
    $parent.addClass("open");
  }
});

为什么removeClass（）有效但hasClass（）不起作用？

1 个答案: