1

有一个菜单下拉菜单，由展开/折叠按钮 (#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();
});
4

2 回答 2

3

弄清楚了：

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

$(".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");
});
于 2011-01-24T19:57:20.937 回答
0

这可能是因为当浏览器第一次读取点击处理程序时，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 替换这些切换功能，以确保单击主体不会展开菜单......就像另一个功能要折叠菜单但不删除“客户端停用”类到正文，然后单击正文仍然会有类名并运行上面的代码，将菜单切换到打开位置。

于 2011-01-22T00:00:52.463 回答