使“菜单”消失在单击任意位置的屏幕上

Question

Hi i have this code which works perfect other than once i click anywhere on my screen to make the dropdown menu content disappear i can't reopen the menu. heres the code i'm using along with a jsfiddle demo below.

 $(document).click(function (e) { var container = $(".dropdown_content"); if (!container.is(e.target) && container.has(e.target).length === 0) { container.fadeOut('slow'); } }); 

 .dropdown { display: block; display: inline-block; margin: 0px 3px; position: relative; } /* ===[ For 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: all 500ms ease-in-out; -moz-transition: all 200ms ease-in-out; -o-transition: all 500ms ease-in-out; -ms-transition: all 500ms ease-in-out; transition: all 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: all 0.2s ease-in-out; -moz-transition: all 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 a { display: block; padding: 2px 7px; padding-right: 15px; color: black; text-decoration: none !important; white-space: nowrap; } .dropdown .dropdown_content li:hover a { color: white; text-decoration: none !important; } .dropdown input[type="checkbox"]:checked ~ .dropdown_content { display: block } .dropdown input[type="checkbox"] { display: none } 

 <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/

Answer 1

It's because of the cascading order :

1. Browser default
2. External style sheet
3. Internal style sheet
4. Inline

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

The solution : use fadeIn on button click (remove this css fix) :)

Answer 2

Is this working. please check and reply.

check this FIDDLE

$(document).click(function (e){
var container = $(".dropdown_content");
if( container.is(':visible')) {
    if(e.target.id != "drop1"){
     $("#drop1").click();
    }
}
});

Answer 3

     .dropdown_content
        {
            display:none;
        }   



 $(document).ready(function () {

            $(".dropdown_button").click(function (e) {
                e.preventDefault();
                $(".dropdown_content").show();
                });
            });

            $(document).click(function (e) {


                var container = $(".dropdown_content");
                if ($(e.target).closest(".dropdown_button").length > 0) {
                    return false;
                }
                if (!container.is(e.target) && container.has(e.target).length === 0) {
                    //e.preventDefault();
                    container.fadeOut();


                }
                //e.preventDefault();

            });

Answer 4

Write your JavaScript code into Anonymous function

    $(function(){
      $(document).click(function (e)
      {

      var container = $(".dropdown_content");

       if (!container.is(e.target) && container.has(e.target).length === 0)
      {
     container.fadeOut('slow');

       }

    });
  });