代码之家 › 专栏 › 技术社区 › Bram Huisman

带移动式关闭按钮的滑出跨度

show hide click jquery

Bram Huisman · 技术社区 · 11 年前

我正在运行一个linkedin脚本,它可以查看一些成员的个人资料信息。它放在最右边,如果你将鼠标悬停在桌面上,它就可以看到。在手机上需要点击,因为悬停不起作用!所以我用一个关闭按钮做了一个例子,让用户知道如何将其最小化。

但当你点击关闭按钮时,我无法隐藏它

这是我的代码

<div id="social">
<div id="block-wrapper">
    <div id="linked-close"></div>
    <div id="linked-block">
        <p>Btn</p>
        <span class="hidden">

        </span>
    </div>
</div>

CSS:

#social{
position: fixed;
top: 80px;
right:0;
}

#block-wrapper #linked-block{
height: 70px;
width: 80px;
background-color: #0076B7;
color: #fff;
font-size: 32px;
text-align: center;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
}

#social #block-wrapper #linked-block span{
position: absolute;
-webkit-transition: 1s; /* For Safari 3.1 to 6.0 */
-ms-transition: 1s; /* For Safari 3.1 to 6.0 */
transition: 1s;
width: 364px;
height: 30px;
background-color: red;
}

#social #block-wrapper #linked-block span.hidden{
position: absolute;
-webkit-transition: 1s; /* For Safari 3.1 to 6.0 */
-ms-transition: 1s; /* For Safari 3.1 to 6.0 */
transition: 1s;
width: 364px;
height: 30px;
background-color: red;
right: -370px;
} 

#social #block-wrapper #linked-block span.show{
-webkit-transition: 1s; /* For Safari 3.1 to 6.0 */
-ms-transition: 1s; /* For Safari 3.1 to 6.0 */
transition: 1s;
right: 0;
}

#linked-close{
position: absolute;
top: -55px;
z-index: 999999;
right:314px;
width: 46px;
height: 46px;
background-color: black;
font-size: 40px;
display: none;
}

JQUERY:

$(document).ready(function($) {
 $('#block-wrapper').on('click', function(){
    $("#social #block-wrapper #linked-block span").toggleClass('show'),
    $("#linked-close").css("display", "block");
 });
 $('#linked-close').on('click', function(){
    $("#linked-close").css("display", "none");
 });   
});

还制作了 jsFiddle

1 回复 | 直到 11 年前

gulty 11 年前

您的问题是,如果您单击#link close,就会触发两个事件。这是因为你的包装器上有一个事件-单击close会在设置display:none之后立即触发#block包装器,因此在关闭元素上会立即触发display:block。

您有两个选项:

如果要将事件保留在包装器上,则必须像这样停止propation:

$(document).ready(function($) {
  $('#block-wrapper').on('click', function(e){
    $("#social #block-wrapper #linked-block span").toggleClass('show');
    $("#linked-close").css("display", "block");
  });
  $('#linked-close').on('click', function(e){
    e.stopPropagation();
    $("#social #block-wrapper #linked-block span").toggleClass('show');
    $("#linked-close").css("display", "none");
  });   
});

根据代码的其余部分,这可能会导致几个问题。也许对你的案子有用。。 Fiddle stopping the Propagation

更好的方法是将第一个单击处理程序放在要单击的实际元素上。在你的情况下 <p>Hoi</p>

$(document).ready(function($) {
  $('#linked-block').find('p').on('click', function(e){
    $("#social #block-wrapper #linked-block span").toggleClass('show');
    $("#linked-close").css("display", "block");
  });
  $('#linked-close').on('click', function(){
    $("#social #block-wrapper #linked-block span").toggleClass('show');
    $("#linked-close").css("display", "none");
  });   
});

Fiddle without stopping the propagation