[英]Pop up doesn't feel responsive enough
我一直按照本指南进行折叠弹出,并添加了以下脚本以在单击其他任何位置时将其关闭。
$(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; }
为什么不呢?您只使用第一个并添加一些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/
您是否尝试为切换和隐藏方法设置一些计时器(即.toggle(300)或.hide(300))
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.