| ligisayan |
20.05.2016 11:47 |
Можно ли на смартфонах раскрывать список не табом, а пальцем?
Всем привет! Есть у меня блок со сворачивающимся-раскрывающимся списком по клику. Ссылка на фидл
Интересует: можно ли на смартфонах раскрывать список не табом, а проводя пальцем по экрану?
$('#bottom-arrow').click(function() {
$(this).toggleClass('toggled');
$('#fix-bot').toggle('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div id="bottom">
<div id="bottom-arrow"></div>
<div id="fix-bot">
<p>Контейнер</p>
</div>
</div>
Код:
#bottom {
position: fixed;
width: 100%;
bottom: 0;
background: rgba(153, 0, 0, 0.8);
text-align: center;
}
#fix-bot {
height: 50px;
}
#fix-bot p {
color: #fff;
}
#bottom-arrow {
width: 100%;
pointer-events: none;
height: 23px;
background: rgba(153, 0, 0, 0.8);
}
#bottom-arrow:before {
pointer-events: all;
content: "\f106";
font-family: 'FontAwesome';
color: #fff;
font-size: 50px;
font-weight: 400;
line-height: 17px;
transition: transform linear 0.5s;
display: inline-block;
}
#bottom-arrow.toggled:before {
content: "\f107";
}
body {
margin: 0;
}
|