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

Question

我是运行一个 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

Answer 1

你的问题是，如果你点击#link-关闭，你有 2 个事件都被触发。那是因为你的包装器上有一个事件 - 单击关闭会立即触发对#block-wrapper 的单击，因此在你设置 display:none 后，你的关闭元素将立即触发 display:block。

您有两个选择：

如果你想将事件保留在包装器上，你必须像这样停止传播：

$(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

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

slide out span with close button for mobile

jquery

click

show

hide