jQuery，关闭菜单

Question

我需要一个菜单的帮助，我正在添加一个名为cometchat的jQuery聊天系统。我一直在尝试添加一个类似Facebook的应用程序菜单，我让它可以打开和关闭，它会关闭身体和工具栏中的任何地方，但它应该打开和关闭的地方。

下面是这段代码：

a("#cometchat_base").append(
  '<div id="cometchat_application" class="cometchat_application menu">
    <strong>Menu</a></strong>
  </div>');

a("#cometchat_base").append(
  '<div class="menu-content" style="
      display:none;
      position:absolute;
      bottom: 30px;
      left: 20px;
      border: 1px solid black;
      background-color:White;
      padding: 5px;">
    <div>
      <a href="#">Menu option 1</a>
    </div>
    <div>
      <a href="#">Menu option 2</a>
    </div>
  </div>');

a(".cometchat_application,.menu").click(function(){
  a(".menu-content").hide();
  a(this).next().show();
  return false;}
);

a("#page-bg,#cometchat_base,.menu-content a").click(function(){
  a(".menu-content").hide();}
);

a(".boo,.menu-content a").click(function(){alert(a(this));});

我尝试更改a("#page-bg,#cometchat_base,.menu-content a")并添加button div类，但它不再打开。我不能更改alert(a(this);，所以它只会打开链接而不会发出任何警告。

Answer 1

在您的第一行代码中，您没有关闭您附加的<div> ...也就是说，如果您包含更多的代码和一些HTML作为基础，可能会有所帮助。

此外，如果您将所有CSS放入样式表中，并将代码格式化到多行中，则会更容易阅读和更整洁:)

Answer 2

好的..。因此，通过大量的试验和错误，我学会了js yay！所以我之前尝试的乱七八糟的代码最终是这样的

//底部栏上的菜单按钮

(<div/>)

.attr("id","cometchat_menu")

.addClass("cometchat_menu")

.html("<strong>Menu</strong>")

.appendTo("#cometchat_base");

//点击按钮时弹出菜单

a("<div/>")

.addClass("menu-content")

.css("display","none")

.css("position","absolute")

.css("bottom","24px")

.css("border","0px")

.css("padding","0px")

.css("width","150px")

.html('...my menu body...')

.appendTo("#cometchat_base");

//显示和隐藏弹出窗口的命令

a(".cometchat_menu") .click(function(){ if(a(this).hasClass("cometchat_menuopen")){a(this).removeClass("cometchat_menuopen");a(".menu-content").hide();}else{a(this).addClass("cometchat_menuopen");a("#menu-content").hide();a(this).next().show();return false;}});

现在我的按钮起作用了:)希望它也能帮助其他人。

Answer 3

Jquery下拉菜单

jquery中最好的事情是我们可以创建自定义函数，并将它们绑定/解除绑定到实时事件。

需要捕获on click操作以关闭打开的菜单单击同一链接或身体上的任何位置都应关闭菜单

在我的例子中，我想关闭一个下拉菜单，如果它点击了主链接或链接之外，即html/body上的任何地方

http://jsfiddle.net/austinnoronha/k2Lwj/

var toggleClick = function(){

    var divObj = $(this).next();
    var nstyle = divObj.css("display");

    if(nstyle == "none"){
        divObj.slideDown(false,function(){
            $("html").bind("click",function(){
                divObj.slideUp();
                $("html").unbind("click");
            });
        });
    }
};

$(".clickme").click(toggleClick);