javascript - Make menu dissappear on click anywhere screen -

javascript - Make menu dissappear on click anywhere screen -

hi have code works perfect other 1 time click anywhere on screen create dropdown menu content disappear can't reopen menu. heres code i'm using along jsfiddle demo below.

class="snippet-code-js lang-js prettyprint-override">$(document).click(function (e) { var container = $(".dropdown_content"); if (!container.is(e.target) && container.has(e.target).length === 0) { container.fadeout('slow'); } }); class="snippet-code-css lang-css prettyprint-override">.dropdown { display: block; display: inline-block; margin: 0px 3px; position: relative; } /* ===[ demonstration ]=== */ .dropdown { margin-top: 50px } /* ===[ end demonstration ]=== */ .dropdown .dropdown_button { cursor: pointer; width: auto; display: inline-block; padding: 4px 5px; font-weight: bold; color: #000; line-height: 16px; text-decoration: none !important; } .dropdown input[type="checkbox"]:checked + .dropdown_button { color: #000; padding: 4px 5px; } .dropdown input[type="checkbox"] + .dropdown_button .arrow { display: inline-block; width: 0px; height: 0px; border-top: 5px solid #fff; border-right: 5px solid transparent; border-left: 5px solid transparent; } .dropdown input[type="checkbox"]:checked + .dropdown_button .arrow { border-color: white transparent transparent transparent } .dropdown .dropdown_content { position: absolute; border: 1px solid #fff; padding: 0px; margin: 0; display: none; padding: 7px; -webkit-transition: 500ms ease-in-out; -moz-transition: 200ms ease-in-out; -o-transition: 500ms ease-in-out; -ms-transition: 500ms ease-in-out; transition: 500ms ease-in-out; -webkit-box-shadow: rgba(0, 0, 0, 0.58) 0px 12px 25px; -moz-box-shadow: rgba(0, 0, 0, 0.58) 0px 12px 25px; box-shadow: rgba(0, 0, 0, 0.58) 0px 12px 25px; background: #fff; font-size: 12px; -moz-border-radius: 0 0 4px 4px; -webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; border-radius: 0 0 4px 4px; min-width: 140px; } .dropdown .dropdown_content li { list-style: none; margin-left: 0px; line-height: 16px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; margin-top: 2px; margin-bottom: 2px; -webkit-transition: 0.2s ease-in-out; -moz-transition: 0.2s ease-in-out; } .dropdown .dropdown_content li:hover { background: #d32d41; text-shadow: 1px 1px 0px #9e2635; -moz-background-clip: padding; -webkit-background-clip: padding-box; -webkit-box-shadow: inset 0 0 1px 1px #f14a5e; -moz-box-shadow: inset 0 0 1px 1px #f14a5e; box-shadow: inset 0 0 1px 1px #f14a5e; border: 1px solid #9e2635; color: #fff; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; } .dropdown .dropdown_content li { display: block; padding: 2px 7px; padding-right: 15px; color: black; text-decoration: none !important; white-space: nowrap; } .dropdown .dropdown_content li:hover { color: white; text-decoration: none !important; } .dropdown input[type="checkbox"]:checked ~ .dropdown_content { display: block } .dropdown input[type="checkbox"] { display: none } class="snippet-code-html lang-html prettyprint-override"><div class="dropdown" id="dropdown"> <input type="checkbox" id="drop1" /> <label for="drop1" class="dropdown_button">click here<span class="arrow"></span></label> <ul class="dropdown_content"> <li><a href="*">user panel</a></li> <li><a href="*">log out</a></li> <li><a href="*">edit profile</a></li> <li><a href="*">edit options</a></li> <li><a href="*">edit avatar</a></li> <li><a href="*">edit signature</a></li> <li><a href="#">buddy list</a></li> </ul> </div>

jsfiddle demo here

http://jsfiddle.net/andreas84x/x5wvnzt7/5/

it's because of the cascading order:

browser default external style sheet internal style sheet inline

when click outside dropdown it'll alter style attribute display: none. when trying alter display block/inline-block in css doesn't take effect, because still inline display: none have priority.

the solution: utilize fadein on button click (remove css fix) :)

javascript jquery html css drop-down-menu