如何切换类，以便单击主体将关闭下拉菜单并更改剩余项目（jquery）的背景？

Question

有一个下拉菜单，由展开/折叠按钮 (#client-select) 和下拉菜单 (.client-select-dd) 组成。菜单本身工作得很好，只是我希望如果用户单击菜单之外的任何位置，而不是专门再次单击按钮，它也可以折叠。

最初菜单是折叠的，因此第一次单击会更改菜单按钮的背景（#client-select）并使下拉选项可见（.client-select-dd）。第一次单击还会向主体添加一个类（.client-deactivate）。再次单击 (#client-select) 会折叠菜单并恢复按钮图像背景。

在我看来，在菜单打开时（并且具有“.client-deactivate”类）单击正文应该折叠菜单并删除 .client-deactivate，但单击正文绝对不会执行任何操作。感谢大家提供的任何帮助。

$("#client-select").click (function() {
  $("body").toggleClass("client-deactivate");
  $(".client-select-close").toggleClass("client-select-open");
  $(".client-select-dd").toggle();
});

$(".client-deactivate").click (function() {
  $(".client-select-open").toggleClass("client-select-close");
  $(".client-select-dd").toggle();
});

Answer 1

想通了：

$("#client-select").live('click', function() {
$("#client-select").addClass("client-select-open");
$("#client-select").removeClass("client-select-close");
$(".client-select-dd").css("显示", "阻止");
$("body").addClass("客户端停用");
});

$(".client-deactivate").live('click', function() {
  $("#client-select").removeClass("client-select-open");
  $("#client-select").addClass("client-select-close");
  $(".client-select-dd").css("display", "none");
  $("body").removeClass("client-deactivate");
});

Answer 2

这可能是因为当浏览器第一次读取点击处理程序时，body 标记上没有“.client-deactivate”类。另外，当您单击正文时，您不想切换任何内容，因为如果菜单折叠并且您单击正文，它会展开菜单。我假设您只希望主体单击处理程序关闭菜单（如果菜单已打开）。

尝试将第二个单击处理程序更改为：

$("body").click(function() {
  if($("body").hasClass("client-deactivate") {
    $(".client-select-open").toggleClass("client-select-close");
    $(".client-select-dd").toggle();
    $("body").removeClass("client-deactivate");
  }
});

您还可以考虑用removeClass替换这些切换函数，只是为了确保单击主体不会展开菜单...就像另一个函数要折叠菜单但不折叠菜单一样将“client-deactivate”类删除到主体，然后单击主体仍将具有类名称并运行上面的代码，将菜单切换到打开位置。