slide out span with close button для мобильного

Question

Я запускаю связанный скрипт, который просматривает информацию о профиле участника. Он помещен в крайнем правом углу, и на рабочем столе это видно, если вы наведите указатель мыши на него. На мобильном устройстве нужно щелкнуть, потому что наведение не работает! Поэтому я сделал пример с закрывающей кнопкой, чтобы пользователь знал, как они могут свести к минимуму ее.

Но я не могу получить кнопку закрытия, чтобы скрыть, когда вы нажали на него

Это мой код

<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

Ваша проблема в том, что у вас есть 2 события и которые инициированы, если нажать на ссылку #-близко. Это потому, что у вас есть событие на вашей обертке - щелчок по закрытию триггеров нажимает на # block-wrapper сразу после и после этого после установки отображения: ни один из них не будет отображаться с немедленным запуском: блок на вашем закрывающем элементе.

У вас есть два варианта:

Если вы хотите сохранить событие на обертке вы должны остановить 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"); 
    }); 
}); 

Это может привести к ряду проблем, в зависимости от остальной части вашего код. Могут работать для вашего дела tho .. 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