0

我一直在按照本指南制作折叠弹出窗口，并添加以下脚本以使其在单击其他任何位置时关闭。

没有 javascript 的 jsfiddle 示例

带有 javascript 的 jsfiddle 示例

$(document).ready( function(){

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

        event.stopPropagation();

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

    });

    $(document).click( function(){

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

    });

});

但是在触发弹出窗口时，它并没有像没有脚本的原始版本那样响应迅速。有时需要两到三下才能触发，所以我想知道是否需要在 Css 中进行一些调整以使其更具响应性。任何帮助深表感谢。

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

2 回答 2

1

为什么不使用第一个并添加一些 JavaScript 来进行切换。就像是

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

示例：http: //jsfiddle.net/wP3vD/

现在，如果有多个元素，上面的代码将不会关闭另一个元素。这可以修复，而不是退出，您可以从匹配集中排除标签。

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

示例：http: //jsfiddle.net/wP3vD/1/

于 2013-09-03T17:19:13.707 回答
0

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

于 2013-09-03T17:16:15.750 回答