Pop up doesn't feel responsive enough

Question

I've been following this guide to make a fold out pop-up and added the following script to make it close when clicking anywhere else.

jsfiddle example without javascript

jsfiddle example with javascript

$(document).ready( function(){

    $('#linkie').click( function(event){

        event.stopPropagation();

        $('.box').toggle();

    });

    $(document).click( function(){

        $('.box').hide();

    });

});

But it doesn't feel as responsive as the original without the script when triggering the pop-up. Sometimes it takes two to three clicks to trigger, so I wonder if there's something that needs to be tweaked in the Css to make it a bit more responsive. Any help is much appreciated.

CSS:

     label {
     position: relative;
     cursor: pointer;
     }

.box {
    position: absolute;
    left: 0;
    top: 100%;
    z-index: 100;

    /* Prevent some white flashing in Safari 5.1 */
    -webkit-backface-visibility: hidden;

    background-color: #eeeeee;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#999999)); 
    background-image: -webkit-linear-gradient(top, #eeeeee, #999999); 
    background-image:    -moz-linear-gradient(top, #eeeeee, #999999); 
    background-image:     -ms-linear-gradient(top, #eeeeee, #999999); 
    background-image:      -o-linear-gradient(top, #eeeeee, #999999); 

    -moz-border-radius:    20px; 
    -webkit-border-radius: 20px; 
    border-radius:         20px; 

    -moz-background-clip:    padding; 
    -webkit-background-clip: padding-box; 
    background-clip:         padding-box; 

    width: 260px; 
    padding: 20px;
    margin: 24px 0;
    opacity: 0;

    -webkit-transform: scale(0) skew(50deg);
    -moz-transform:    scale(0) skew(50deg);
    -ms-transform:     scale(0) skew(50deg);
    -o-transform:      scale(0) skew(50deg);

    -webkit-transform-origin: 0px -30px;
    -moz-transform-origin:    0px -30px;
    -ms-transform-origin:     0px -30px;
    -o-transform-origin:      0px -30px;

    -webkit-transition: -webkit-transform ease-out .35s, opacity ease-out .4s;
    -moz-transition:    -moz-transform    ease-out .35s, opacity ease-out .4s;
    -ms-transition:     -ms-transform     ease-out .35s, opacity ease-out .4s;
    -o-transition:      -o-transform      ease-out .35s, opacity ease-out .4s;
}

        .box:after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 30px;
    border-bottom: 20px solid #eee;
    border-left:   14px solid transparent;
    border-right:  14px solid transparent;
    width:  0;
    height: 0;
}

        .popUpControl:checked ~ label > .box {
    opacity: 1;
    -webkit-transform: scale(1) skew(0deg);
    -moz-transform:    scale(1) skew(0deg);
    -ms-transform:     scale(1) skew(0deg);
    -o-transform:      scale(1) skew(0deg);
}
        .popUpControl { 
        display: none; 
}

        .button {
    background: blue;
    color: white;
    padding: 5px;
    border-radius: 5px;
}               

/* For link example */
.link { color: blue; text-decoration: underline; }
.title { display: block; font-weight: bold; margin: 0 0 10px 0; color: black; font: bold 16px Sans-Serif; text-decoration: none; }
    .copy { color: black; text-decoration: none;  }

Answer 1

Why don;t you just use the first one and add some JavaScript to do the toggling. Something like

$(document).on("click", function(e) {
    var elem = $(e.target);
    if(elem.hasClass("link")) {  
        return;
    }
    $(".popUpControl:checked").next("label").click();
});

Example: http://jsfiddle.net/wP3vD/

Now the code above will not close the other element if there are multiple. That can be fixed, instead of exiting, you can excluded the label from the matched set.

$(document).on("mousedown", function (e) {
    var elem = $(e.target);
    labelsToClick = $(".popUpControl:checked").next("label").filter(function (i) {
        return !$(this).find(elem).length;
    }).click();
});

Example: http://jsfiddle.net/wP3vD/1/

Answer 2

您是否尝试为切换和隐藏方法设置一些计时器（即.toggle（300）或.hide（300））