我一直关注this guide进行折叠弹出窗口并添加以下脚本,以便在点击其他任何地方时将其关闭。
jsfiddle example without javascript
jsfiddle example with javascript
$(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; }
答案 0 :(得分:1)
为什么不这样做;你只需使用第一个并添加一些JavaScript来进行切换。像
这样的东西$(document).on("click", function(e) {
var elem = $(e.target);
if(elem.hasClass("link")) {
return;
}
$(".popUpControl:checked").next("label").click();
});
现在,如果有多个,上面的代码将不会关闭另一个元素。这可以修复,而不是退出,您可以从匹配集中排除标签。
$(document).on("mousedown", function (e) {
var elem = $(e.target);
labelsToClick = $(".popUpControl:checked").next("label").filter(function (i) {
return !$(this).find(elem).length;
}).click();
});
答案 1 :(得分:0)
您是否尝试为切换和隐藏方法设置一些计时器(即.toggle(300)或.hide(300))