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（）{ $（“＃客户选择”）addClass（“客户选择开”）。 $（“＃客户选择”）removeClass（“客户选择关闭”）。 $（“。client-select-dd”）。css（“display”，“block”）; $（ “身体”）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替换这些切换函数，只是为了确保点击正文不会展开菜单...就像其他函数要折叠菜单但不删除“客户端 - 停用“类到正文，然后点击正文然后仍然有类名并运行上面的代码，将菜单切换到打开位置。

如何切换类以便单击正文将切换下拉菜单并更改剩余项目的背景（jquery）？

2 个答案: