jQuery,关闭菜单

时间:2009-09-30 01:42:25

标签: jquery menu popup

我需要一个菜单​​的帮助我正在添加一个名为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")并添加按钮div类,但之后它就不再打开了。并且alert(a(this);我无法更改,因此它只是打开链接而没有任何警报。

3 个答案:

答案 0 :(得分:0)

在你的第一行代码中,你没有关闭你要附加的<div> ...据说如果你包含更多的代码和一些HTML来支持它可能会有所帮助。

此外,如果您将所有CSS放入样式表并为我们在多行上格式化代码,那么阅读和清理会更容易:)

答案 1 :(得分:0)

好的......所以有很多试验和错误我学习js yay !!!! 所以我之前尝试的代码混乱就像这样

//底栏上的菜单按钮

(<div/>) {
{1}} {
{1}} {
{1}} {
{1}}


//点击按钮时的弹出菜单

.attr("id","cometchat_menu") {
{1}} {
{1}} {
{1}} {
{1}} {
{1}}
.addClass("cometchat_menu") {
{1}} {
{1}} {
{1}}


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

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

现在我的按钮正常工作:)希望它也可以帮助其他人。

答案 2 :(得分:0)

Jquery下拉菜单

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

点击操作需要捕获以关闭打开的meny,无论是点击相同的链接还是在正文上的任何位置都应该关闭菜单

在我的情况下,如果点击主链接或链接外部,即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);