Help with menu closing, please!!!

Question

i need help with a menu i'm adding on a jquery chat system called cometchat i've been trying to add a facebook like applications menu and i got it to work with opening and closing and it closes clicking everywhere in the body and the bar but the place it should open and close. if someone can help please 'cause im not good at JS. :/

here is the piece of code:

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));});

I tried to change a("#page-bg,#cometchat_base,.menu-content a") and add the button div class but then it wont open anymore. And the alert(a(this); i couldnt change so it just opens the link without any alerts.

Answer 1

In your first line of code, you don't close the <div> you are appending... that being said it might help if you included a little more code and some HTML to base this on.

Also, it would be easier to read and cleaner if you put all the CSS into the stylesheet and formatted the code on more than one line for us :)

Answer 2

Ok... so with a lot of trials and errors me learning js yay!!!! So that mess of codes i tried before ended up like this

//Menu button on bottom bar

(<div/>)
.attr("id","cometchat_menu")
.addClass("cometchat_menu")
.html("<strong>Menu</strong>")
.appendTo("#cometchat_base");

//Popup menu when button clicked

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");

//Command to show and hide the popup

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;}});

And now my button works :) hope it can help other people too.